SolidJS "build failed" when vite-plugin-solid is missing in CI
Solid does not use a virtual DOM, so its JSX must be compiled by vite-plugin-solid (which wraps babel-preset-solid). If the plugin is missing or misordered in vite.config, Vite tries to parse Solid JSX with the wrong transform and the build fails.
What this error means
A vite build step fails with a JSX transform or parse error, or the app ships but reactivity is dead, because vite-plugin-solid was never registered in the Vite plugin array.
error during build:
[vite]: Rollup failed to resolve import "solid-js/web" from "src/index.tsx".
Transform failed with 1 error:
src/App.tsx: Unexpected token (12:6)Common causes
The Solid plugin is not in vite.config
Without solid() in the plugins array, Vite has no transform for Solid JSX, so it fails to parse or produces a bundle that never hydrates.
Plugin ordering conflicts with another JSX transform
A React or generic JSX plugin loaded before vite-plugin-solid claims the JSX and Solid never sees it.
How to fix it
Register vite-plugin-solid
- Install
vite-plugin-solidas a dev dependency. - Add
solid()to thepluginsarray invite.config.ts. - Remove any competing React/JSX plugin so Solid owns the transform.
import { defineConfig } from 'vite';
import solid from 'vite-plugin-solid';
export default defineConfig({
plugins: [solid()],
});Pin the plugin in the lockfile
Commit the lockfile so CI installs the same vite-plugin-solid version that builds locally.
npm install -D vite-plugin-solid
git add package-lock.jsonHow to prevent it
- Keep
solid()as the JSX-owning plugin invite.config. - Do not mix a React JSX plugin into a Solid project.
- Commit the lockfile so the plugin version is identical in CI.