Releases: vitejs/vite-plugin-react
v4.3.4
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
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.
v4.2.1
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,
}
v4.2.0
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.
v4.1.1
v4.1.0
- 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 settingmoduleResolution
tonode16
ornodenext
in your tsconfig (we recommend usingbundler
which is more close to how Vite works)