@vitejs/plugin-react

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.

Improve the react compiler preset filter to reduce false-positives (#1138)

Improved the filter in the react compiler babel preset to reduce the false-positives so that less modules are processed by the react compiler.

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.

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)

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: true 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.

Add explicit semicolon in preambleCode #485

This fixes an edge case when using HTML minifiers that strips line breaks aggressively.

Add filter for rolldown-vite #470

Added filter so that it is more performant when running this plugin with rolldown-powered version of Vite.

Skip HMR for JSX files with hooks #480

This removes the HMR warning for hooks with JSX.

Fix type issue when using moduleResolution: "node" in tsconfig #462

Make compatible with rolldown-vite

This plugin is now compatible with rolldown-powered version of Vite. Note that currently the __source property value position might be incorrect. This will be fixed in the near future.

Add reactRefreshHost option

Add reactRefreshHost option to set a React Fast Refresh runtime URL prefix. This is useful in a module federation context to enable HMR by specifying the host application URL in the Vite config of a remote application. See full discussion here: https://github.com/module-federation/vite/issues/183#issuecomment-2751825367

export default defineConfig({
  plugins: [react({ reactRefreshHost: 'http://localhost:3000' })],
})

This project publishes no release notes. Between v4.3.4 and v4.4.0-beta.1 there were 238 commits, 193 of them substantive:

• Initial commit [publish]
• Add CHANGELOG.md
• Add LICENSE [publish]
• Fix CHANGELOG.md
• Add vite as peer dependency & pin @swc/core [publish]
• Use named export instead of default export for better esm/cjs interop & add support for jsx automatic runtime [publish]
• Fix esbuild property in documentation [publish]
• Fix CHANGELOG.md
• Unpinned @swc/core to get new features [publish]
• Include react/jsx-dev-runtime for dependencies optimisation when using automatic runtime [publish]
• Add source maps support [publish]
• v2.2.0 [publish]
• Skip react-refresh on SSR (Fix #2) [publish]
• Switch to pnpm
• Add playground
• Simplify configuration: Enforce automatic jsx runtime & useDefineForClassFields, remove support for esbuild.define
• Use new hot.invalidate when file is not a refresh boundary.
• Add testing with Playwright
• Rename
• Use default export and add ESM output

…and 173 more.

Add Vite 6 to peerDependencies range

Vite 6 is highly backward compatible, not much to add!

Force Babel to output spec compliant import attributes #386

The default was an old spec (with type: "json"). We now enforce spec compliant (with { type: "json" })

React Compiler runtimeModule option removed

React Compiler was updated to accept a target option and runtimeModule was removed. vite-plugin-react will still detect runtimeModule for backwards compatibility.

When using a custom runtimeModule or target !== '19', the plugin will not try to pre-optimize react/compiler-runtime dependency.

The react-compiler-runtime is now available on npm can be used instead of the local shim for people using the compiler with React < 19.

Here is the configuration to use the compiler with React 18 and correct source maps in development:

npm install babel-plugin-react-compiler react-compiler-runtime @babel/plugin-transform-react-jsx-development

export default defineConfig(({ command }) => {
  const babelPlugins = [['babel-plugin-react-compiler', { target: '18' }]]
  if (command === 'serve') {
    babelPlugins.push(['@babel/plugin-transform-react-jsx-development', {}])
  }

  return {
    plugins: [react({ babel: { plugins: babelPlugins } })],
  }
})

Ignore directive sourcemap error #369

Fix support for React Compiler with React 18

The previous version made this assumption that the compiler was only usable with React 19, but it's possible to use it with React 18 and a custom runtimeModule: https://gist.github.com/poteto/37c076bf112a07ba39d0e5f0645fec43

When using a custom runtimeModule, the plugin will not try to pre-optimize react/compiler-runtime dependency.

Reminder: Vite expect code outside of node_modules to be ESM, so you will need to update the gist with import React from 'react'.

Fix support for React compiler

Don't set retainLines: true when the React compiler is used. This creates whitespace issues and the compiler is modifying the JSX too much to get correct line numbers after that. If you want to use the React compiler and get back correct line numbers for tools like vite-plugin-react-click-to-component to work, you should update your config to something like:

export default defineConfig(({ command }) => {
  const babelPlugins = [['babel-plugin-react-compiler', {}]]
  if (command === 'serve') {
    babelPlugins.push(['@babel/plugin-transform-react-jsx-development', {}])
  }

  return {
    plugins: [react({ babel: { plugins: babelPlugins } })],
  }
})

Support HMR for class components

This is a long overdue and should fix some issues people had with HMR when migrating from CRA.

Remove generic parameter on Plugin to avoid type error with Rollup 4/Vite 5 and skipLibCheck: false.

I expect very few people to currently use this feature, but if you are extending the React plugin via api object, you can get back the typing of the hook by importing ViteReactPluginApi:

import type { Plugin } from 'vite'
import type { ViteReactPluginApi } from '@vitejs/plugin-react'

export const somePlugin: Plugin = {
  name: 'some-plugin',
  api: {
    reactBabel: (babelConfig) => {
      babelConfig.plugins.push('some-babel-plugin')
    },
  } satisfies ViteReactPluginApi,
}

Update peer dependency range to target Vite 5

There were no breaking change that impacted this plugin, so any combination of React plugins and Vite core version will work.

Align jsx runtime for optimized dependencies

This will only affect people using internal libraries that contains untranspiled JSX. This change aligns the optimizer with the source code and avoid issues when the published source don't have React in the scope.

Reminder: While being partially supported in Vite, publishing TS & JSX outside of internal libraries is highly discouraged.

• Enable retainLines to get correct line numbers for jsxDev (fix #235)

• Add @types/babel__cores to dependencies (fix #211)
• Improve build perf when not using Babel plugins by lazy loading @babel/core #212
• Better invalidation message when an export is added & fix HMR for export of nullish values #215
• Include non-dev jsx runtime in optimizeDeps & support HMR for JS files using the non dev runtime #224
• The build output now contains a index.d.cts file so you don't get types errors when setting moduleResolution to node16 or nodenext in your tsconfig (we recommend using bundler which is more close to how Vite works)

• Fix #198: Enable Babel if presets list is not empty

• Revert #108: Remove throw when refresh runtime is loaded twice to enable usage in micro frontend apps. This was added to help fix setup usage, and this is not worth an annoying warning for others or a config parameter.

• Fix fast-refresh for files that are transformed into jsx (#188)

• Support Vitest deps.experimentalOptimizer
• Support using components inside web workers (#181)

This major version include a revamp of options:

• include/exclude now allow to completely override the files processed by the plugin (#122). This is more in line with other Rollup/Vite plugins and simplify the setup of enabling Fast Refresh for .mdx files. This can be done like this:

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

These changes also allow to apply Babel plugins on files outside Vite root (expect in node_modules), which improve support for monorepo (fix #16).

With these changes, only the file extensions is used for filtering processed files and the query param fallback is removed.

• fastRefresh is removed (#122). This should be correctly activated by plugin without configuration.
• jsxPure is removed. This is a niche use case that was just passing down the boolean to esbuild.jsxSideEffects. (#129)

The support for React auto import whe using classic runtime is removed. This was prone to errors and added complexity for no good reason given the very wide support of automatic runtime nowadays. This migration path should be as simple as removing the runtime option from the config.

This release goes in hand with the upcoming Vite 4.3 release focusing on performances:

• Cache plugin load (#141)
• Wrap dynamic import to speedup analysis (#143)

Other notable changes:

• Silence "use client" warning (#144, fix #137)
• Fast Refresh is applied on JS files using automatic runtime (#122, fix #83)
• Vite 4.2 is required as a peer dependency (#128)
• Avoid key collision in React refresh registration (a74dfef, fix #116)
• Throw when refresh runtime is loaded twice (#108, fix #101)
• Don't force optimization of jsx-runtime (#132)

• fix: add jsx dev runtime to optimizeDeps (#147) (3bbd8f0), closes #147

This major version include a revamp of options:

• include/exclude now allow to completely override the files processed by the plugin (#122). This is more in line with other Rollup/Vite plugins and simplify the setup of enabling Fast Refresh for .mdx files. This can be done like this:

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

These changes also allow to apply Babel plugins on files outside Vite root (expect in node_modules), which improve support for monorepo (fix #16).

With these changes, only the file extensions is used for filtering processed files and the query param fallback is removed.

• fastRefresh is removed (#122). This should be correctly activated by plugin without configuration.
• jsxPure is removed. This is a niche use case that was just passing down the boolean to esbuild.jsxSideEffects. (#129)
• jsxRuntime is unchanged but deprecated (#131) and will be removed in the next major.

This release goes in hand with the upcoming Vite 4.3 release focusing on performances:

• Cache plugin load (#141)
• Wrap dynamic import to speedup analysis (#143)

Other notable changes:

• Silence "use client" warning (#144, fix #137)
• Fast Refresh is applied on JS files using automatic runtime (#122, fix #83)
• Vite 4.2 is required as a peer dependency (#128)
• Avoid key collision in React refresh registration (a74dfef, fix #116)
• Throw when refresh runtime is loaded twice (#108, fix #101)
• Don't force optimization of jsx-runtime (#132)

• doc: add jsxImportSource option (38d71f6)
• chore: bump release-scripts, typecheck package in CI, remove cache for eslint (9af763d)
• fix: fast-refresh explain link (#97) (6097795), closes #97

• fix: add RefreshSig to refresh content regex (closes #52) (c8dd1d6), closes #52
• fix(deps): update all non-major dependencies (#81) (e935a1f), closes #81
• feat: invalidate message and fix HMR for HOC, class component & styled component (#79) (48017b7), closes #79

• chore: update vite to ^4.0.0 (#57) (941b20d), closes #57
• chore(deps): update rollup (#56) (af25ec7), closes #56
• chore!: drop ast check for refresh boundary (#43) (e43bd76), closes #43

• chore: clean some leftovers from Vite core (#44) (d2a3931), closes #44
• chore: enable prettier trailing commas (#35) (b647e74), closes #35
• chore: more package name fixes (fixes #37) (#42) (9094c8b), closes #37 #42
• chore: package setup (ced7860)
• chore: remove unused babel automatic runtime plugins (#41) (1464a8f), closes #41
• chore(deps): update all non-major dependencies (#47) (0cfe83a), closes #47

• fix(deps): update all non-major dependencies (#11091) (073a4bf), closes #11091

• fix(plugin-react): jsxDev is not a function when is set NODE_ENV in env files (#10861) (be1ba4a), closes #10861
• perf: regexp perf issues, refactor regexp stylistic issues (#10905) (fc007df), closes #10905

• feat!: transform jsx with esbuild instead of babel (#9590) (f677b62), closes #9590
• fix(deps): update all non-major dependencies (#10804) (f686afa), closes #10804

• fix(deps): update all non-major dependencies (#10610) (bb95467), closes #10610
• fix(plugin-react): update package.json (#10479) (7f45eb5), closes #10479
• chore(deps): update all non-major dependencies (#10393) (f519423), closes #10393

• fix(deps): update all non-major dependencies (#10077) (caf00c8), closes #10077
• fix(deps): update all non-major dependencies (#10160) (6233c83), closes #10160
• fix(deps): update all non-major dependencies (#10316) (a38b450), closes #10316
• fix(deps): update all non-major dependencies (#9985) (855f2f0), closes #9985
• fix(react): conditionally self-accept fast-refresh HMR (#10239) (e976b06), closes #10239
• feat: add throwIfNamespace option for custom JSX runtime (#9571) (f842f74), closes #9571
• refactor(types): bundle client types (#9966) (da632bf), closes #9966

• fix(plugin-react): duplicate **self prop and **source prop (#9387) (c89de3a), closes #9387

• docs: fix typo (#9855) (583f185), closes #9855
• fix: add react to optimizeDeps (#9056) (bc4a627), closes #9056
• fix(deps): update all non-major dependencies (#9888) (e35a58b), closes #9888

• chore: 3.0 release notes and bump peer deps (#9072) (427ba26), closes #9072
• fix(react): sourcemap incorrect warning and classic runtime sourcemap (#9006) (bdae7fa), closes #9006