Using chakra-ui-solid in Vite
A guide for installing chakra-ui-solid in Vite projects
No special steps. A Vite app with vite-plugin-solid already compiles our packages correctly,
because that plugin is exactly the thing our published output expects to meet. Follow
Installation and there is nothing to add here.
This page exists to say so. The two settings the SolidStart and TanStack Start pages describe are about server rendering and dependency pre-bundling, and a client-only Vite app does neither — so a reader looking for a Vite-specific step should be able to find out in one screen that there isn’t one, rather than concluding they missed it.
Why there is anything to say at all
We publish JSX-preserved .jsx under the "solid" export condition, with no "import" or
"default" fallback. Your toolchain compiles it, which is what lets one published artefact
produce per-environment output — client, server, hydrating client — instead of us guessing which
one you need.
The cost is that the two places a bundler tries to avoid compiling a dependency both break:
- Server-side externalization. Node cannot import raw JSX.
- Client-side dependency pre-bundling. The pre-bundler compiles JSX as React, so the module loads and the component renders nothing.
A plain vite build does neither by default for a workspace app, so there is nothing to
configure. If you add SSR, the SolidStart page’s two
lines apply.