vite-plugin-solid

2.11.12 verified Sat Apr 25 auth: no javascript

Official Vite plugin for Solid.js, providing HMR, JSX transformation, and SSR support. Current stable version is 2.11.12, supporting Vite versions 3 through 8 and Solid.js 1.7.2+. Development on v3.0.0 is ongoing with release candidates. Key differentiators: first-class Solid.js integration, solid-refresh HMR, and automatic configuration of Babel/Solid transforms. Releases are frequent with patches addressing edge cases and compatibility with newer Vite versions. Alternatives like unplugin-solid are less official.

Common errors

error Cannot find module 'vite-plugin-solid' ↓

cause Missing dependency; npm install not run

fix

Run 'npm install vite-plugin-solid'

error TypeError: solidPlugin is not a function ↓

cause Wrong import style; used named import for default export

fix

Use 'import solidPlugin from 'vite-plugin-solid''

error [vite] Internal server error: [plugin:vite-plugin-solid] <file> is not a valid JSX file ↓

cause File extension not .jsx or .tsx

fix

Ensure Solid components use .jsx or .tsx extension.

Warnings

breaking SSR resolve.external behavior changed in Vite 6+ ↓

fix Upgrade to v2.11.10+ to avoid unconditional externalization.

deprecated vite-plugin-solid v3.x is in pre-release; breaking changes expected ↓

fix Pin to v2.x for stable projects: npm install vite-plugin-solid@^2

gotcha Plugin must be the first in plugins array ↓

fix Order plugins: solidPlugin() before other transforms.

gotcha Supports Vite 3–7 only; Vite 8 requires v2.11.11+ or v3 ↓

fix Update to v2.11.11+ or v3 pre-release.

deprecated Use of require() to import plugin ↓

fix Use ESM import syntax exclusively.

Install

npm install vite-plugin-solid

yarn add vite-plugin-solid

pnpm add vite-plugin-solid

Imports

vitePluginSolid

wrong

import { vitePluginSolid } from 'vite-plugin-solid'

correct

import vitePluginSolid from 'vite-plugin-solid'

Default export; named export 'default' also works.

solidPlugin
```
import solidPlugin from 'vite-plugin-solid'
```
Alias for default export, commonly used in Vite configs.

solid

wrong

const solid = require('vite-plugin-solid')

correct

import solid from 'vite-plugin-solid'

ESM-only plugin; CommonJS require not supported.

Quickstart

Shows minimal Vite config with Solid plugin, enabling HMR and JSX transforms.

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';

export default defineConfig({
  plugins: [solidPlugin()],
});