vite-plugin-react

4.0.1 verified Mon Apr 27 auth: no javascript

Official Vite plugin providing React Fast Refresh support, version 4.0.1. Release cadence follows Vite major releases. Key differentiator: default in create-vite-app React template, first-party support from Vite team. Alternative to react-refresh-webpack-plugin, with native ESM and HMR integration.

Common errors

error Cannot find module 'vite-plugin-react' ↓

cause Package not installed or missing dependencies.

fix

Run npm install vite-plugin-react.

error TypeError: react is not a function ↓

cause Incorrect import or usage in vite.config.js

fix

Ensure you import default export: import react from 'vite-plugin-react' and call it as react().

error Uncaught Error: [vite-plugin-react] React Fast Refresh requires a React version that supports hooks. ↓

cause Using React <16.8.0 without Hooks support.

fix

Upgrade React to >=16.8.0.

Warnings

breaking vite-plugin-react requires Vite >=1.0.0-rc.13. Using older versions will cause errors. ↓

fix Update Vite to >=1.0.0-rc.13.

deprecated The `jsx: 'react'` config option is no longer needed in Vite 2+. ↓

fix Remove `jsx: 'react'` from vite.config.js.

gotcha This plugin does not provide Babel transforms; ensure your project already handles JSX via Vite's built-in support. ↓

fix Use Vite's default esbuild for JSX or add @vitejs/plugin-react-refresh separately.

Install

npm install vite-plugin-react

yarn add vite-plugin-react

pnpm add vite-plugin-react

Imports

default

wrong

const react = require('vite-plugin-react')

correct

import react from 'vite-plugin-react'

Default export, also works with require in CJS but prefer import.

createPlugin
```
import { createPlugin } from 'vite-plugin-react'
```
Named export for advanced usage, not commonly used.

reactFastRefresh

wrong

import { fastRefresh } from 'vite-plugin-react'

correct

import { reactFastRefresh } from 'vite-plugin-react'

Exact name of the HMR plugin.

Quickstart

Configures Vite with React Fast Refresh using the vite-plugin-react plugin.

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

export default defineConfig({
  plugins: [react()]
});