![\"Solid](\"https://raw.githubusercontent.com/solidjs/solid-vite-plugin/master/banner.png\")
\n\n \n
![\"HMR](\".github/hmr.gif\")
\n\n# Got a question? / Need help?\n\nJoin [solid discord](https://discord.com/invite/solidjs) and check the [troubleshooting section](#troubleshooting) to see if your question hasn't been already answered.\n\n## Features\n\n- HMR with no configuration needed\n- Drop-in installation as a vite plugin\n- Minimal bundle size\n- Support typescript (`.tsx`) out of the box\n- Experimental TypeScript TSRX (`.tsrx`) support out of the box\n- Support code splitting out of the box\n\n## Requirements\n\nThis module is 100% ESM compatible and requires Node.js `^20.19.0 || >=22.12.0`.\n\nYou can check your current Node.js version by running `node -v`. Use a version\nmanager such as [Volta](https://volta.sh/) or [nvm](https://github.com/nvm-sh/nvm)\nto update it.\n\nSupported Vite versions: **Vite 8 and 9**.\n\n## Quickstart\n\nYou can use the [vite-template-solid](https://github.com/solidjs/templates) starter templates similar to CRA:\n\n```bash\n$ npx degit solidjs/templates/js my-solid-project\n$ cd my-solid-project\n$ npm install # or pnpm install or yarn install\n$ npm run start # starts dev-server with hot-module-reloading\n$ npm run build # builds to /dist\n```\n\n## Installation\n\nInstall `vite`, `@solidjs/vite-plugin` as dev dependencies.\n\nInstall `solid-js` as dependency.\n\nYou have to install those so that you are in control to which solid version is used to compile your code.\n\n```bash\n# with npm\n$ npm install -D vite @solidjs/vite-plugin\n$ npm install solid-js\n\n# with pnpm\n$ pnpm add -D vite @solidjs/vite-plugin\n$ pnpm add solid-js\n\n# with yarn\n$ yarn add -D vite @solidjs/vite-plugin\n$ yarn add solid-js\n```\n\nAdd it as plugin to `vite.config.js`\n\n```js\n// vite.config.ts\nimport { defineConfig } from 'vite';\nimport solidPlugin from '@solidjs/vite-plugin';\n\nexport default defineConfig({\n plugins: [solidPlugin()],\n});\n```\n\n## Run\n\nJust use regular `vite` or `vite build` commands\n\n```json\n{\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\"\n }\n}\n```\n\n## API\n\n### options\n\n- Type: Object\n- Default: {}\n\n#### options.include\n\n- Type: (string | RegExp)[] | string | RegExp | null\n- Default: undefined\n\nA [picomatch](https://github.com/micromatch/picomatch) pattern, or array of patterns, which specifies the files the plugin should operate on.\n\n#### options.exclude\n\n- Type: (string | RegExp)[] | string | RegExp | null\n- Default: undefined\n\nA [picomatch](https://github.com/micromatch/picomatch) pattern, or array of patterns, which specifies the files to be ignored by the plugin.\n\n#### options.dev\n\n- Type: Boolean\n- Default: true\n\nThis will inject `solid-js/dev` in place of `solid-js` in dev mode. Has no effect in prod.\nIf set to false, it won't inject it in dev.\nThis is useful for extra logs and debug.\n\n#### options.hot\n\n- Type: Boolean\n- Default: true\n\nThis will inject HMR runtime in dev mode. Has no effect in prod.\nIf set to false, it won't inject the runtime in dev.\n\n#### options.ssr\n\n- Type: Boolean\n- Default: false\n\nWhether the app is server-rendered — one meaning everywhere.\n\nWithout [`start`](#optionsstart), `ssr: true` enables the SSR transforms\n(hydratable client code, SSR server code); you provide the entries and the\nserver yourself, as before. With `start`, the boolean selects the start\nmode: `ssr: true` is SSR start mode, `ssr: false`/omitted is client start\nmode — see below.\n\nObjects are no longer accepted (config-time error): the start-mode options\nthat used to live on `ssr: { ... }` moved to `start: { ... }`, with\n`ssr: true` set alongside.\n\n#### options.start\n\n- Type: Boolean | Object\n- Default: undefined\n\n**Start is now a mode of the plugin**: the serving layer that\nreplaces SolidStart. The plugin owns entries, dev serving, and the build —\nno entry files, no `index.html`, no dev server script. `start: true` is the\nzero-config spelling; add `ssr: true` for streaming SSR:\n\n```ts\n// vite.config.ts\nimport { defineConfig } from 'vite';\nimport solidPlugin from '@solidjs/vite-plugin';\n\nexport default defineConfig({\n plugins: [solidPlugin({ start: true, ssr: true })],\n});\n```\n\nOne set of conventions serves both rendering modes, and the\n[`ssr`](#optionsssr) boolean picks between them: `ssr: true` streams\nserver-side rendering with zero wiring; without it the same app is\nclient-rendered onto a prerendered static shell. Flipping a project between\nSPA and SSR is toggling that one boolean — same `App`, same `Document`,\nsame server functions.\n\nThe object form carries the options (`start: true` is pure sugar for\n`start: {}` — both mean the identical start mode with defaults, and\n`false`/absent means off): `app`, `document`, `entryServer`, `entryClient`,\n`middleware`, `setup`, `renderMode`, `env`, `devtools`, `errorBoundary`,\n`css`, `external`, all documented below.\n\nInstall `@solidjs/start-devtools` as a development dependency to add the\ndevelopment toolbar with runtime errors and server function calls:\n\n```sh\npnpm add -D @solidjs/start-devtools@next\n```\n\nStart mode detects the package automatically. Set `start: { devtools: true }`\nto require it or `start: { devtools: false }` to disable automatic integration.\nThe package is an optional peer and the toolbar is not included in production\nbuilds.\n\nGenerated entries wrap the app automatically. With custom server and client\nentries, place the development boundary around the app in the shared document\nor root:\n\n```tsx\nimport { DevToolbar } from \"@solidjs/start-devtools\";\n\n\n