vite + TS + @vibe/core #2865
-
|
is @vibe/core compatable with Vite and typescript? Also I tried to downgrade to many other react versions(18, 17, 16) and vibe vibe version but nothing helped "dependencies": {
"@vibe/core": "^3.46.1",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@eslint/js": "^9.25.0",
"@types/react": "^19.1.2",
"@types/react-dom": "^19.1.2",
"@vitejs/plugin-react": "^4.4.1",
"eslint": "^9.25.0",
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.19",
"globals": "^16.0.0",
"typescript": "~5.8.3",
"typescript-eslint": "^8.30.1",
"vite": "^6.3.2"
}import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import { Button } from '@vibe/core';
import "@vibe/core/tokens"; // <-- can not find module
function App() {
const [count, setCount] = useState(0)
return (
<>
<Button>Primary</Button>
<Button kind="secondary">Secondary</Button>
<div>
<a href="https://vite.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.tsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</>
)
}
export default App |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 3 replies
-
|
Hey @AliaksandrKdocomotion! |
Beta Was this translation helpful? Give feedback.
-
|
Hi, fixing it required for some reason after all that it still didn't show correctly and it seems the css is not applied To reproduce just create a new vite react ts project, install the @vibe/core library and follow the readme steps Please fix this issues and add setup steps in documentation. |
Beta Was this translation helpful? Give feedback.
-
|
From further research I found out the components work mostly good with the suggested fixes.
for some reason it is not set to correct background as can be seen in the previous message |
Beta Was this translation helpful? Give feedback.
-
|
Hey everyone! Thanks for reporting the issues above. I'll try to answer and update on all:
I'm closing this discussion as it has several issues reported, so if any issue still persist please create a new discussion (or an issue for a bug), thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Great @talkor ! I'm excited to see you are planning to support react 19 and already saw the improved dropdown component! Thanks for the update! |
Beta Was this translation helpful? Give feedback.
Hey everyone! Thanks for reporting the issues above. I'll try to answer and update on all:
Vite + TS support - Vibe is compatible with with Vite and Typescript
@vibe/core/tokensis not typed - fixed startingv3.55.0(see #2922)React 19 support - Vibe is currently not compatible with React 19. We’ve been working on React 19 support recently, but ran into some unexpected issues with some of the library's dependencies. Addressing these would require breaking changes, so we've decided to hold off for now. We're aiming to fully support React 19 in our next major release, which is planned for the coming months. I do want to point out that we did some changes to remove deprecated APIs in …