What changed in @vitejs/plugin-react from 5 to 6

Add compiler.logDiagnostics option

Recoverable React Compiler diagnostics are no longer logged by default. Set compiler.logDiagnostics to true to log them through Vite. Fatal diagnostics are always logged and fail the transform.

Respect environment sourcemap option for React Compiler transform when builder.sharedPlugins is enabled (#1439)

The React Compiler transform was using the top-level sourcemap option instead of the environment sourcemap option. This caused a problem when the experimental builder.sharedPlugins was enabled.

Add experimental native React Compiler support (#1419)

Add experimental native React Compiler support.

You can use it by installing oxc-transform-react and enabling it via the compiler option:

npm install -D oxc-transform-react

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

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

Fixed the react compiler preset filter to be linear (#1353)

The improved filter in v6.0.3 was non-linear and caused a performance regression (#1349). The filter was changed to be linear to avoid that.

Fixed $RefreshSig$ is not defined error when running vite dev with NODE_ENV=production

When running vite dev with NODE_ENV=production, the app errored with $RefreshSig$ is not defined. This error is now fixed.

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.