vite-react

5.0.0 verified Mon Apr 27 auth: no javascript

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.

Common errors

error Error: Cannot find module 'vite' ↓

cause vite is a peer dependency and must be installed separately.

fix

Run 'npm install vite' or 'pnpm add vite'.

error Error [ERR_REQUIRE_ESM]: require() of ES Module ... at Object.<anonymous> ... ↓

cause Package is ESM-only since v4.0.0, but CommonJS require() was used.

fix

Use import syntax. Add 'type': 'module' to package.json, or rename file to .mjs.

error TypeError: defineConfig is not a function ↓

cause Importing from 'vite' instead of 'vite-react'

fix

Change import to: import { defineConfig } from 'vite-react'

error Cannot find module '@vitejs/plugin-react-swc' or peer dependency not installed ↓

cause vite-react internally uses @vitejs/plugin-react-swc but it may be missing if not installed as transitive dependency.

fix

Ensure vite-react is installed. If issues persist, manually install @vitejs/plugin-react-swc as devDependency.

Warnings

breaking v5.0.0 requires Vite ^7. Using with older Vite will fail. ↓

fix Update vite to ^7 and vite-react to ^5.0.0.

breaking v4.0.0 dropped CommonJS support. Only ESM is supported. ↓

fix Use ESM imports (import/export). Add 'type': 'module' in package.json or rename config to .mts/.mjs.

breaking v4.0.0 requires Vite ^6. ↓

fix Update vite to ^6 for v4.x.

deprecated v3.0.0 required Vite ^5. Older Vite versions not supported. ↓

fix Use vite ^5 for v3.x.

gotcha react options passed to defineConfig may conflict if @vitejs/plugin-react or @vitejs/plugin-react-swc are also manually added. ↓

fix Remove manual react plugin configuration. Use vite-react's react option instead.

gotcha aliasFromTsconfig requires tsconfig.json to be in the project root and paths to be defined. ↓

fix Ensure tsconfig.json has paths configured correctly. Plugin watches tsconfig for changes.

Install

npm install vite-react

yarn add vite-react

pnpm add vite-react

Imports

defineConfig
wrong
```
import { defineConfig } from 'vite'
```
correct
```
import { defineConfig } from 'vite-react'
```
Replace vite's defineConfig with vite-react's enhanced version which accepts additional configs like react, legacy, html.

default

wrong

const viteReact = require('vite-react')

correct

import viteReact from 'vite-react'

Package is ESM-only since v4.0.0. Use import syntax.

defineConfig (CommonJS)

wrong

const { defineConfig } = require('vite-react')

correct

// Cannot use require. Must use ESM import.

vite-react v4+ dropped CJS support. Use ESM imports only.

type definitions

wrong

/// <reference types="vite/client" /> or 'types' in tsconfig

correct

No manual types import needed; types are auto-included.

vite-react automatically provides vite/client types. Remove any manual reference.

Quickstart

Minimal vite.config.mts showing enhanced defineConfig with react, legacy, and server options.

// vite.config.mts
import { defineConfig } from 'vite-react';

export default defineConfig({
  react: {
    swc: true, // default, use SWC for fast refresh
  },
  legacy: true, // enable @vitejs/plugin-legacy
  html: { minify: true },
  server: {
    https: true, // auto-generate self-signed cert
    qrcode: true, // show QR code in terminal
    watchExtend: ['config/*.json'], // additional files to watch
  },
  resolve: {
    aliasFromTsconfig: true, // read paths from tsconfig.json
  },
  build: {
    chunkSizeWarningLimit: 800,
  },
});