Vite 8
Vite 8.x, from https://vite.dev/guide/. Each claim ends with its source page.
How to navigate
- Read the quick rules below. They catch the most frequent mistakes.
- Open the one reference file that matches the task, from the table at the end.
- For
rollupOptions,esbuildormanualChunks, readreferences/migration.mdfirst.
Quick start
// vite.config.ts
import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), '') // .env files are not in process.env here
return {
plugins: [react()],
server: { port: Number(env.PORT ?? 5173), strictPort: true },
build: {
rolldownOptions: { output: { /* Rolldown options, not Rollup */ } },
},
}
})
{ "compilerOptions": { "types": ["vite/client"], "isolatedModules": true } }
- Node.js 20.19+ or 22.12+. Scaffold with
npm create vite@latest my-app -- --template react-ts. https://vite.dev/guide/ - Scripts:
vite(dev, port 5173),vite build,vite preview(port 4173, local check only, never a production server). https://vite.dev/guide/cli , https://vite.dev/config/preview-options - Vite never type-checks. Run
tsc --noEmitnext to it. https://vite.dev/guide/features#transpile-only
Quick rules
Toolchain and config
- Rolldown bundles builds and pre-bundles dependencies. Oxc transforms and minifies JS, Lightning CSS minifies CSS. https://vite.dev/guide/why#a-unified-toolchain , https://vite.dev/guide/migration#dependency-optimizer-now-uses-rolldown , https://vite.dev/guide/migration#javascript-transforms-by-oxc , https://vite.dev/guide/migration#css-minification-by-lightning-css
- Write
build.rolldownOptions,worker.rolldownOptions,optimizeDeps.rolldownOptionsandoxc. TherollupOptions,esbuildOptionsandesbuildkeys are deprecated. https://vite.dev/guide/migration#other-related-deprecations , https://vite.dev/guide/migration#javascript-transforms-by-oxc - Declare entries with the top-level
inputoption. It is the default forbuild.rolldownOptions.input,build.lib.entryandoptimizeDeps.entries. https://vite.dev/config/shared-options#input - Chunking goes through
build.rolldownOptions.output.codeSplitting, notmanualChunks. https://vite.dev/guide/build#chunking-strategy tsconfigtargetis ignored: setbuild.target(default'baseline-widely-available'). Vite adds no polyfills, use@vitejs/plugin-legacy. https://vite.dev/guide/features#target , https://vite.dev/config/build-options#build-target , https://vite.dev/guide/build#browser-compatibility- Oxc cannot lower native decorators or mangle properties. Add Babel or SWC filtered to files containing
@. https://vite.dev/guide/migration#javascript-transforms-by-oxc , https://vite.dev/guide/migration#javascript-minification-by-oxc - A default import from CommonJS may now return the whole
module.exports("got: object", "is not a function"). https://vite.dev/guide/migration#consistent-commonjs-interop , https://vite.dev/guide/troubleshooting#default-import-unexpectedly-returns-an-object
Env and modes
- Only
VITE_variables reach client code, always as strings, inlined in the bundle. Never put secrets there, and never setenvPrefix: ''. https://vite.dev/guide/env-and-mode#env-variables , https://vite.dev/config/shared-options#envprefix .envfiles are loaded after the config runs. Invite.config, useloadEnv(mode, root, ''). https://vite.dev/config/#using-environment-variables-in-config- Shell variables beat
.envfiles..envedits need a restart. https://vite.dev/guide/env-and-mode#env-files --modeandNODE_ENVare independent:vite build --mode stagingis still a production build. https://vite.dev/guide/env-and-mode#node-env-and-modes- Write
import.meta.env.BASE_URLliterally, the bracket form is not replaced. https://vite.dev/guide/build#public-base-path
Dev server
- Never set
server.allowedHosts: trueorserver.cors: true: any website could read your source. https://vite.dev/config/server-options#server-allowedhosts , https://vite.dev/config/server-options#server-cors - A busy port silently moves to the next one unless
strictPort: true. https://vite.dev/config/server-options#server-port - WebSocket settings live in
server.ws.server.hmrkeeps onlyboolean | { overlay }. https://vite.dev/config/server-options#server-hmr - After
npm linkor editing a linked dependency, restart withvite --force. https://vite.dev/guide/troubleshooting#outdated-pre-bundled-deps-when-linking-to-a-local-package - A full reload instead of HMR can come from a circular dependency (
vite --debug hmr). https://vite.dev/guide/troubleshooting#a-full-reload-happens-instead-of-hmr
Build and deploy
- Serve HTML with
Cache-Control: no-cacheand reload onvite:preloadError, or old pages break after a deploy. https://vite.dev/guide/build#load-error-handling import.meta.globarguments must be literals. A dynamicimport()must start with./,../or#and end with a file extension:import(`./dir/${name}.js`). https://vite.dev/guide/features#glob-import-caveats , https://vite.dev/guide/features#dynamic-import- CSS as a string:
import css from './a.css?inline'. Default imports of.cssare gone. https://vite.dev/guide/features#disabling-css-injection-into-the-page - Library mode statically replaces
import.meta.env.*but leavesprocess.env.*untouched. https://vite.dev/guide/build#library-mode
Plugins, HMR, SSR
- Use hook filters,
transform: { filter: { id: /\.ext$/ }, handler }, and returnmoduleType: 'js'when converting non-JS. https://vite.dev/guide/api-plugin#hook-filters , https://vite.dev/guide/migration#module-type-support-and-auto-detection - Read
this.environmentin hooks rather than thessrflag.hotUpdateis the environment-aware counterpart ofhandleHotUpdate, whose deprecation is only planned for a future major. https://vite.dev/guide/api-environment-plugins#accessing-the-current-environment-in-hooks , https://vite.dev/changes/hotupdate-hook configureServermiddlewares run before Vite's. Return a function to run after. https://vite.dev/guide/api-plugin#configureserver- Write
import.meta.hot.accept(literally insideif (import.meta.hot). https://vite.dev/guide/api-hmr#hot-accept-cb - SSR dev:
server.middlewareMode: trueplusappType: 'custom', load the entry withserver.environments.ssr.runner.import()(ssrLoadModuleis planned for deprecation). https://vite.dev/guide/ssr#setting-up-the-dev-server , https://vite.dev/guide/api-environment-frameworks#runnabledevenvironment , https://vite.dev/changes/ssr-using-modulerunner vite buildbuilds the client only.vite build --appbuilds every environment. https://vite.dev/guide/api-environment-frameworks#environments-during-build
Old patterns
| Old | Current |
|---|---|
build.rollupOptions | build.rolldownOptions |
esbuild: { jsx..., jsxInject } | oxc: { jsx: {...}, jsxInject } |
optimizeDeps.esbuildOptions | optimizeDeps.rolldownOptions |
output.manualChunks | output.codeSplitting |
server.hmr.port, clientPort | server.ws.port, clientPort |
build.polyfillModulePreload | build.modulePreload.polyfill |
import s from './a.css' | import s from './a.css?inline' |
import.meta.hot.decline() (a noop) | import.meta.hot.invalidate() |
server.ssrLoadModule(url) | environment.runner.import(url) |
handleHotUpdate + server.ws.send | hotUpdate + this.environment.hot.send |
Reference files
| File | Read it for |
|---|---|
| references/migration.md | Vite 7 to 8: renamed options, CommonJS interop, removed features |
| references/config-and-env.md | Config, loadEnv, import.meta.env, modes, base |
| references/code-features.md | TypeScript, JSX, HTML, CSS, assets, import.meta.glob, dynamic imports, workers, WebAssembly |
| references/dev-server.md | Host, port, allowedHosts, CORS, proxy, middleware mode, preview |
| references/dependencies-and-performance.md | Pre-bundling, optimizeDeps, linked packages, dev speed |
| references/build.md | Targets, rolldownOptions, chunks, library mode |
| references/backend-integration-and-deploy.md | Backend integration, manifest, static hosting |
| references/ssr.md | SSR dev server, production build, externals, plugins |
| references/plugins.md | Plugin hooks, filters, virtual modules, ordering |
| references/hmr-and-javascript-api.md | import.meta.hot, custom events, createServer, build, preview |
| references/environment-api.md | environments config, this.environment, configEnvironment, per-environment state |
| references/environment-frameworks.md | builder.buildApp, ModuleRunner |
Pages read: SOURCES.md.