@vitejs/plugin-react

@vitejs/plugin-react

The default Vite plugin for React projects.

• enable Fast Refresh in development (requires react >= 16.9)
• use the automatic JSX runtime
• use custom Babel plugins/presets
• small installation size

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

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

Options

include/exclude

Includes .js, .jsx, .ts & .tsx and excludes /node_modules/ by default. This option can be used to add fast refresh to .mdx files:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import mdx from '@mdx-js/rollup'

export default defineConfig({
  plugins: [
    { enforce: 'pre', ...mdx() },
    react({ include: /\.(mdx|js|jsx|ts|tsx)$/ }),
  ],
})

jsxImportSource

Control where the JSX factory is imported from. By default, this is inferred from jsxImportSource from corresponding a tsconfig file for a transformed file.

react({ jsxImportSource: '@emotion/react' })

jsxRuntime

By default, the plugin uses the automatic JSX runtime. However, if you encounter any issues, you may opt out using the jsxRuntime option.

react({ jsxRuntime: 'classic' })

babel

The babel option lets you add plugins, presets, and other configuration to the Babel transformation performed on each included file.

react({
  babel: {
    presets: [...],
    // Your plugins run before any built-in transform (eg: Fast Refresh)
    plugins: [...],
    // Use .babelrc files
    babelrc: true,
    // Use babel.config.js files
    configFile: true,
  }
})

Note: When not using plugins, only esbuild is used for production builds, resulting in faster builds.

Proposed syntax

If you are using ES syntax that are still in proposal status (e.g. class properties), you can selectively enable them with the babel.parserOpts.plugins option:

react({
  babel: {
    parserOpts: {
      plugins: ['decorators-legacy'],
    },
  },
})

This option does not enable code transformation. That is handled by esbuild.

Note: TypeScript syntax is handled automatically.

Here's the complete list of Babel parser plugins.

reactRefreshHost

The reactRefreshHost option is only necessary in a module federation context. It enables HMR to work between a remote & host application. In your remote Vite config, you would add your host origin:

react({ reactRefreshHost: 'http://localhost:3000' })

Under the hood, this simply updates the React Fash Refresh runtime URL from /@react-refresh to http://localhost:3000/@react-refresh to ensure there is only one Refresh runtime across the whole application. Note that if you define base option in the host application, you need to include it in the option, like: http://localhost:3000/{base}.

@vitejs/plugin-react/preamble

The package provides @vitejs/plugin-react/preamble to initialize HMR runtime from client entrypoint for SSR applications which don't use transformIndexHtml API. For example:

// [entry.client.js]
import '@vitejs/plugin-react/preamble'

Alternatively, you can manually call transformIndexHtml during SSR, which sets up equivalent initialization code. Here's an example for an Express server:

app.get('/', async (req, res, next) => {
  try {
    let html = fs.readFileSync(path.resolve(root, 'index.html'), 'utf-8')

    // Transform HTML using Vite plugins.
    html = await viteServer.transformIndexHtml(req.url, html)

    res.send(html)
  } catch (e) {
    return next(e)
  }
})

Otherwise, you'll get the following error:

Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong.

Consistent components exports

For React refresh to work correctly, your file should only export React components. You can find a good explanation in the Gatsby docs.

If an incompatible change in exports is found, the module will be invalidated and HMR will propagate. To make it easier to export simple constants alongside your component, the module is only invalidated when their value changes.

You can catch mistakes and get more detailed warning with this eslint rule.

Similar packages

Other packages similar to @vitejs/plugin-react

react-refresh-webpack-plugin

A Webpack plugin that enables React Fast Refresh. It is similar to @vitejs/plugin-react in providing hot reloading capabilities but is specific to Webpack-based projects.

babel-preset-react-app

This Babel preset includes the necessary Babel plugins for React applications created with Create React App. It handles JSX transformation and other React optimizations but does not provide hot reloading on its own.

craco

CRACO (Create React App Configuration Override) is an npm package that allows you to customize the Create React App configuration without ejecting. It can be used to modify Babel and Webpack configurations, similar to how @vitejs/plugin-react allows for custom configurations in a Vite project.