@vitejs/plugin-react

Allow all options in reactCompilerPreset (#1189)

This is a type only change. Only compilationMode and target options were available for reactCompilerPreset.

Expand @rolldown/plugin-babel peer dep range (#1146)

Expanded @rolldown/plugin-babel peer dep range to include ^0.2.0.

Remove Babel Related Features (#1123)

Vite 8+ can handle React Refresh Transform by Oxc and doesn't need Babel for it. With that, there are no transform applied that requires Babel. To reduce the installation size of this plugin, babel is no longer a dependency of this plugin and the related features are removed.

If you are using Babel, you can use @rolldown/plugin-babel together with this plugin:

 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import babel from '@rolldown/plugin-babel'

 export default defineConfig({
   plugins: [
-     react({
-       babel: {
-         plugins: ['@babel/plugin-proposal-throw-expressions'],
-       },
-     }),
+     react(),
+     babel({
+       plugins: ['@babel/plugin-proposal-throw-expressions'],
+     }),
   ]
 })

For React compiler users, you can use reactCompilerPreset for easier setup with preconfigured filter to improve build performance:

 import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import react, { reactCompilerPreset } from '@vitejs/plugin-react'
+import babel from '@rolldown/plugin-babel'

 export default defineConfig({
   plugins: [
-    react({
-      babel: {
-        plugins: ['babel-plugin-react-compiler'],
-      },
-    }),
+    react(),
+    babel({
+      presets: [reactCompilerPreset()]
+    }),
   ]
 })

Drop Vite 7 and below support (#1124)

Vite 7 and below are no longer supported. If you are using Vite 7, please upgrade to Vite 8.

Add Vite 8 to peerDependencies range #1143

This plugin is compatible with Vite 8.

Remove Babel Related Features (#1123)

Vite 8+ can handle React Refresh Transform by Oxc and doesn't need Babel for it. With that, there are no transform applied that requires Babel. To reduce the installation size of this plugin, babel is no longer a dependency of this plugin and the related features are removed.

If you are using Babel, you can use @rolldown/plugin-babel together with this plugin:

 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import babel from '@rolldown/plugin-babel'

 export default defineConfig({
   plugins: [
-     react({
-       babel: {
-         plugins: ['@babel/plugin-proposal-throw-expressions'],
-       },
-     }),
+     react(),
+     babel({
+       plugins: ['@babel/plugin-proposal-throw-expressions'],
+     }),
   ]
 })

For React compiler users, you can use reactCompilerPreset for easier setup with preconfigured filter to improve build performance:

 import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import react, { reactCompilerPreset } from '@vitejs/plugin-react'
+import babel from '@rolldown/plugin-babel'

 export default defineConfig({
   plugins: [
-    react({
-      babel: {
-        plugins: ['babel-plugin-react-compiler'],
-      },
-    }),
+    react(),
+    babel({
+      presets: [reactCompilerPreset()]
+    }),
   ]
 })

Drop Vite 7 and below support (#1124)

Vite 7 and below are no longer supported. If you are using Vite 7, please upgrade to Vite 8.

Fix canSkipBabel not accounting for babel.overrides (#1098)

When configuring babel.overrides without top-level plugins or presets, Babel was incorrectly skipped. The canSkipBabel function now checks for overrides.length to ensure override configurations are processed.

Update code to support newer rolldown-vite (#976)

rolldown-vite will remove optimizeDeps.rollupOptions in favor of optimizeDeps.rolldownOptions soon. This plugin now uses optimizeDeps.rolldownOptions to support newer rolldown-vite. Please update rolldown-vite to the latest version if you are using an older version.

Add @vitejs/plugin-react/preamble virtual module for SSR HMR (#890)

SSR applications can now initialize HMR runtime by importing @vitejs/plugin-react/preamble at the top of their client entry instead of manually calling transformIndexHtml. This simplifies SSR setup for applications that don't use the transformIndexHtml API.

Fix raw Rolldown support for Rolldown 1.0.0-beta.44+ (#930)

Rolldown 1.0.0-beta.44+ removed the top-level jsx option in favor of transform.jsx. This plugin now uses the transform.jsx option to support Rolldown 1.0.0-beta.44+.

Perf: use native refresh wrapper plugin in rolldown-vite (#881)

HMR did not work for components imported with queries with rolldown-vite (#872)

Perf: simplify refresh wrapper generation (#835)

Skip transform hook completely in rolldown-vite in dev if possible (#783)

Set optimizeDeps.rollupOptions.transform.jsx instead of optimizeDeps.rollupOptions.jsx for rolldown-vite (#735)

optimizeDeps.rollupOptions.jsx is going to be deprecated in favor of optimizeDeps.rollupOptions.transform.jsx.

Perf: skip babel-plugin-react-compiler if code has no "use memo" when { compilationMode: "annotation" } (#734)

Respect tsconfig jsxImportSource (#726)

Fix reactRefreshHost option on rolldown-vite (#716)

Fix RefreshRuntime being injected twice for class components on rolldown-vite (#708)

Skip babel-plugin-react-compiler on non client environment (689)

(Same content as v5.0.0-beta.0 https://github.com/vitejs/vite-plugin-react/releases/tag/plugin-react%405.0.0-beta.0)

Use Oxc for react refresh transform in rolldown-vite

When used with rolldown-vite, this plugin now uses Oxc for react refresh transform.

Since this behavior is what @vitejs/plugin-react-oxc did, @vitejs/plugin-react-oxc is now deprecated and the disableOxcRecommendation option is removed.

Also, while @vitejs/plugin-react-oxc used the production JSX transform even for NODE_ENV=development build, @vitejs/plugin-react uses the development JSX transform for NODE_ENV=development build.

Allow processing files in node_modules

The default value of exclude options is now [/\/node_modules\//] to allow processing files in node_modules directory. It was previously [] and files in node_modules was always excluded regardless of the value of exclude option.

react and react-dom is no longer added to resolve.dedupe automatically

Adding values to resolve.dedupe forces Vite to resolve them differently from how Node.js does, which can be confusing and may not be expected. This plugin no longer adds react and react-dom to resolve.dedupe automatically.

If you encounter errors after upgrading, check your package.json for version mismatches in dependencies or devDependencies, as well as your package manager’s configuration. If you prefer the previous behavior, you can manually add react and react-dom to resolve.dedupe.

Remove old babel-plugin-react-compiler support that requires runtimeModule option

runtimeModule option is no longer needed in newer babel-plugin-react-compiler versions. Make sure to use a newer version of babel-plugin-react-compiler that supports target option.

Require Node 20.19+, 22.12+

This plugin now requires Node 20.19+ or 22.12+.

Use Oxc for react refresh transform in rolldown-vite

When used with rolldown-vite, this plugin now uses Oxc for react refresh transform.

Since this behavior is what @vitejs/plugin-react-oxc did, @vitejs/plugin-react-oxc is now deprecated and the disableOxcRecommendation option is removed.

Also, while @vitejs/plugin-react-oxc used the production JSX transform even for NODE_ENV=development build, @vitejs/plugin-react uses the development JSX transform for NODE_ENV=development build.

Allow processing files in node_modules

The default value of exclude options is now [/\/node_modules\//] to allow processing files in node_modules directory. It was previously [] and files in node_modules was always excluded regardless of the value of exclude option.

react and react-dom is no longer added to resolve.dedupe automatically

Adding values to resolve.dedupe forces Vite to resolve them differently from how Node.js does, which can be confusing and may not be expected. This plugin no longer adds react and react-dom to resolve.dedupe automatically.

If you encounter errors after upgrading, check your package.json for version mismatches in dependencies or devDependencies, as well as your package manager’s configuration. If you prefer the previous behavior, you can manually add react and react-dom to resolve.dedupe.

Remove old babel-plugin-react-compiler support that requires runtimeModule option

runtimeModule option is no longer needed in newer babel-plugin-react-compiler versions. Make sure to use a newer version of babel-plugin-react-compiler that supports target option.

Require Node 20.19+, 22.12+

This plugin now requires Node 20.19+ or 22.12+.

Add HMR support for compound components (#518)

HMR now works for compound components like this:

const Root = () => <div>Accordion Root</div>
const Item = () => <div>Accordion Item</div>

export const Accordion = { Root, Item }

Return Plugin[] instead of PluginOption[] (#537)

The return type has changed from react(): PluginOption[] to more specialized type react(): Plugin[]. This allows for type-safe manipulation of plugins, for example:

// previously this causes type errors
react({ babel: { plugins: ['babel-plugin-react-compiler'] } })
  .map(p => ({ ...p, applyToEnvironment: e => e.name === 'client' }))

Add raw Rolldown support

This plugin only worked with Vite. But now it can also be used with raw Rolldown. The main purpose for using this plugin with Rolldown is to use react compiler.

Suggest @vitejs/plugin-react-oxc if rolldown-vite is detected #491

Emit a log which recommends @vitejs/plugin-react-oxc when rolldown-vite is detected to improve performance and use Oxc under the hood. The warning can be disabled by setting disableOxcRecommendation: false in the plugin options.

Use optimizeDeps.rollupOptions instead of optimizeDeps.esbuildOptions for rolldown-vite #489

This suppresses the warning about optimizeDeps.esbuildOptions being deprecated in rolldown-vite.

Add Vite 7-beta to peerDependencies range #497

React plugins are compatible with Vite 7, this removes the warning when testing the beta.