{"id":10428,"library":"vite","title":"Vite","description":"Vite is a next-generation frontend build tool, currently at stable version 8.0.8, designed to significantly improve the frontend development experience. It functions as a dev server serving source files over native ES modules with fast Hot Module Replacement (HMR), and a build command that bundles code with Rollup for optimized production assets. Vite provides rich built-in features, a universal plugin interface, and fully typed APIs, making it highly extensible. Patch releases are frequent, with major versions released periodically.","status":"active","version":"8.0.8","language":"javascript","source_language":"en","source_url":"https://github.com/vitejs/vite","tags":["javascript","frontend","framework","hmr","dev-server","build-tool","vite"],"install":[{"cmd":"npm install vite","lang":"bash","label":"npm"},{"cmd":"yarn add vite","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Primarily used for configuring vite.config.ts/js files.","symbol":"defineConfig","correct":"import { defineConfig } from 'vite'"}],"quickstart":{"code":"npm create vite@latest my-vite-app -- --template react-ts\ncd my-vite-app\nnpm install\nnpm run dev","lang":"typescript","description":"This command creates a new Vite project using the `create-vite` scaffold, setting up a React project with TypeScript. It then navigates into the project directory, installs dependencies, and starts the development server."},"warnings":[{"fix":"Upgrade your Node.js installation to version 20.19.0 or higher, or 22.12.0 or higher.","message":"Vite requires Node.js version `^20.19.0` or `>=22.12.0`.","severity":"breaking","affected_versions":"<8.0.0"},{"fix":"Ensure your configuration file uses `export default` for its primary export and ESM `import` statements. If using a `.js` file, ensure your project's `package.json` has `\"type\": \"module\"` or rename the config file to `vite.config.mjs`.","message":"Vite configuration files (e.g., `vite.config.js`) must be written as native ES Modules (ESM).","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Rename your environment variables (e.g., `.env` file) to `VITE_MY_VAR` and access them via `import.meta.env.VITE_MY_VAR`.","message":"Environment variables exposed to client-side code must be prefixed with `VITE_`.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Ensure `esbuild` is installed in your project: `npm install esbuild` or `yarn add esbuild` or `pnpm add esbuild`.","message":"The `esbuild` package is a peer dependency and is crucial for Vite's fast cold start and build performance. While Vite can fall back without it, it's highly recommended.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Install the plugin (`npm install -D @vitejs/plugin-legacy`) and add it to your `vite.config.js` plugins array.","message":"For supporting older browsers (e.g., IE11), the `@vitejs/plugin-legacy` plugin is required.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-18T00:00:00.000Z","next_check":"2026-07-17T00:00:00.000Z","problems":[{"fix":"Ensure your `vite.config.js` file is interpreted as an ES Module. This can be done by adding `\"type\": \"module\"` to your `package.json` or by renaming `vite.config.js` to `vite.config.mjs`.","cause":"Attempting to use ESM syntax (like `import` and `export default`) in a Vite configuration file that is being treated as CommonJS.","error":"SyntaxError: Cannot use import statement outside a module"},{"fix":"Upgrade your Node.js installation to version `^20.19.0` or `>=22.12.0`.","cause":"The Node.js version running Vite does not meet the minimum requirements specified in the package's `engines` field.","error":"Your current Node.js version is [X]. Vite requires Node.js version ^20.19.0 || >=22.12.0."},{"fix":"Use `import.meta.env` for environment variables in client-side code. For custom variables, ensure they are prefixed with `VITE_` (e.g., `VITE_APP_API_URL`).","cause":"Accessing `process.env` directly in client-side code, which is a Node.js global and not available in the browser environment.","error":"ReferenceError: process is not defined"},{"fix":"Verify that `some-package` is installed correctly via `npm install some-package`. Check the module's documentation for correct import paths and ensure its `package.json` properly defines its exports for ESM environments.","cause":"The imported module cannot be found in `node_modules`, its `package.json` `exports` field is misconfigured, or the import path is incorrect.","error":"Failed to resolve import \"some-package\" from \"src/main.ts\""},{"fix":"Check the module's documentation or source code for available exports. Ensure named exports are correctly defined or consider using a default import if the module primarily uses default exports.","cause":"Attempting to import a named export that does not exist in the specified module, often due to incorrect CommonJS/ESM interop or misconfigured exports in a third-party library.","error":"RollupError: \"SymbolName\" is not exported by \"module-name.js\""}],"ecosystem":"npm"}