{"id":27525,"library":"vite-react","title":"vite-react","description":"A React-specific configuration preset for Vite that bundles multiple plugins and settings into a single dependency. Latest version 5.0.0 requires Vite ^7 and Node ^20.19.0 || >=22.12.0. Active development with major releases aligning with Vite's major versions. Key differentiators: automatically includes @vitejs/plugin-react-swc (or babel), sass/less preprocessors, path alias resolution from tsconfig, auto-generated HTTPS certificates, CSS modules with development-friendly names, legacy browser support via @vitejs/plugin-legacy, and QR code for mobile preview. Only supports ESM since v4.0.0.","status":"active","version":"5.0.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/geekact/vite-react","tags":["javascript","typescript"],"install":[{"cmd":"npm install vite-react","lang":"bash","label":"npm"},{"cmd":"yarn add vite-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-react","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Replace vite's defineConfig with vite-react's enhanced version which accepts additional configs like react, legacy, html.","wrong":"import { defineConfig } from 'vite'","symbol":"defineConfig","correct":"import { defineConfig } from 'vite-react'"},{"note":"Package is ESM-only since v4.0.0. Use import syntax.","wrong":"const viteReact = require('vite-react')","symbol":"default","correct":"import viteReact from 'vite-react'"},{"note":"vite-react v4+ dropped CJS support. Use ESM imports only.","wrong":"const { defineConfig } = require('vite-react')","symbol":"defineConfig (CommonJS)","correct":"// Cannot use require. Must use ESM import."},{"note":"vite-react automatically provides vite/client types. Remove any manual reference.","wrong":"/// <reference types=\"vite/client\" /> or 'types' in tsconfig","symbol":"type definitions","correct":"No manual types import needed; types are auto-included."}],"quickstart":{"code":"// vite.config.mts\nimport { defineConfig } from 'vite-react';\n\nexport default defineConfig({\n  react: {\n    swc: true, // default, use SWC for fast refresh\n  },\n  legacy: true, // enable @vitejs/plugin-legacy\n  html: { minify: true },\n  server: {\n    https: true, // auto-generate self-signed cert\n    qrcode: true, // show QR code in terminal\n    watchExtend: ['config/*.json'], // additional files to watch\n  },\n  resolve: {\n    aliasFromTsconfig: true, // read paths from tsconfig.json\n  },\n  build: {\n    chunkSizeWarningLimit: 800,\n  },\n});","lang":"typescript","description":"Minimal vite.config.mts showing enhanced defineConfig with react, legacy, and server options."},"warnings":[{"fix":"Update vite to ^7 and vite-react to ^5.0.0.","message":"v5.0.0 requires Vite ^7. Using with older Vite will fail.","severity":"breaking","affected_versions":"<5.0.0"},{"fix":"Use ESM imports (import/export). Add 'type': 'module' in package.json or rename config to .mts/.mjs.","message":"v4.0.0 dropped CommonJS support. Only ESM is supported.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Update vite to ^6 for v4.x.","message":"v4.0.0 requires Vite ^6.","severity":"breaking","affected_versions":">=4.0.0 <5.0.0"},{"fix":"Use vite ^5 for v3.x.","message":"v3.0.0 required Vite ^5. Older Vite versions not supported.","severity":"deprecated","affected_versions":">=3.0.0 <4.0.0"},{"fix":"Remove manual react plugin configuration. Use vite-react's react option instead.","message":"react options passed to defineConfig may conflict if @vitejs/plugin-react or @vitejs/plugin-react-swc are also manually added.","severity":"gotcha","affected_versions":"all"},{"fix":"Ensure tsconfig.json has paths configured correctly. Plugin watches tsconfig for changes.","message":"aliasFromTsconfig requires tsconfig.json to be in the project root and paths to be defined.","severity":"gotcha","affected_versions":">=2.3.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run 'npm install vite' or 'pnpm add vite'.","cause":"vite is a peer dependency and must be installed separately.","error":"Error: Cannot find module 'vite'"},{"fix":"Use import syntax. Add 'type': 'module' to package.json, or rename file to .mjs.","cause":"Package is ESM-only since v4.0.0, but CommonJS require() was used.","error":"Error [ERR_REQUIRE_ESM]: require() of ES Module ...\n    at Object.<anonymous> ..."},{"fix":"Change import to: import { defineConfig } from 'vite-react'","cause":"Importing from 'vite' instead of 'vite-react'","error":"TypeError: defineConfig is not a function"},{"fix":"Ensure vite-react is installed. If issues persist, manually install @vitejs/plugin-react-swc as devDependency.","cause":"vite-react internally uses @vitejs/plugin-react-swc but it may be missing if not installed as transitive dependency.","error":"Cannot find module '@vitejs/plugin-react-swc' or peer dependency not installed"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}