Skip to content
Latchkey

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.

vite
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

  1. Install vite-plugin-solid as a dev dependency.
  2. Add solid() to the plugins array in vite.config.ts.
  3. Remove any competing React/JSX plugin so Solid owns the transform.
vite.config.ts
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.

Terminal
npm install -D vite-plugin-solid
git add package-lock.json

How to prevent it

  • Keep solid() as the JSX-owning plugin in vite.config.
  • Do not mix a React JSX plugin into a Solid project.
  • Commit the lockfile so the plugin version is identical in CI.

Related guides

Tired of flaky CI? Latchkey auto-heals failed jobs and retries them for you. Start free →