Update dependency @vitejs/plugin-react to v5
This MR contains the following updates:
| Package | Change | Age | Confidence |
|---|---|---|---|
| @vitejs/plugin-react (source) | ^4.2.1 -> ^5.0.0 |
Release Notes
vitejs/vite-plugin-react (@vitejs/plugin-react)
v5.1.1
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.
v5.1.0
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+.
v5.0.4
Perf: use native refresh wrapper plugin in rolldown-vite (#881)
v5.0.3
HMR did not work for components imported with queries with rolldown-vite (#872)
Perf: simplify refresh wrapper generation (#835)
v5.0.2
Skip transform hook completely in rolldown-vite in dev if possible (#783)
v5.0.1
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)
v5.0.0
v4.7.0
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' }))
v4.6.0
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.
v4.5.2
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.
v4.5.1
Add explicit semicolon in preambleCode #485
This fixes an edge case when using HTML minifiers that strips line breaks aggressively.
v4.5.0
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.
v4.4.1
Fix type issue when using moduleResolution: "node" in tsconfig #462
v4.4.0
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.
v4.3.4
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" })
v4.3.3
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 } })],
}
})
v4.3.2
Ignore directive sourcemap error #369
v4.3.1
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'.
v4.3.0
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.
Configuration
-
If you want to rebase/retry this MR, check this box
This MR has been generated by Renovate Bot.