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
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'
.
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 } })],
}
})
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,
}
There were no breaking change that impacted this plugin, so any combination of React plugins and Vite core version will work.
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 settingmoduleResolution
tonode16
ornodenext
in your tsconfig (we recommend usingbundler
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:
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)
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:
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
- fix: don't invalidate when code is invalid (#67) (9231a86), closes #67
- fix(deps): update all non-major dependencies (#69) (0a8e099), closes #69
- 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(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
- docs: fix typo (#9855) (583f185), closes #9855
- fix: add
react
tooptimizeDeps
(#9056) (bc4a627), closes #9056 - fix(deps): update all non-major dependencies (#9888) (e35a58b), closes #9888
- fix: don't count class declarations as react fast refresh boundry (fixes #3675) (#8887) (5a18284), closes #3675 #8887
- fix: mention that Node.js 13/15 support is dropped (fixes #9113) (#9116) (2826303), closes #9113 #9116
- fix(deps): update all non-major dependencies (#9176) (31d3b70), closes #9176
- fix(deps): update all non-major dependencies (#9575) (8071325), closes #9575
- fix(plugin-react): wrong substitution causes
React is not defined
(#9386) (8a5b575), closes #9386 - docs: fix server options link (#9242) (29db3ea), closes #9242
- 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
- fix(deps): update all non-major dependencies (#8802) (a4a634d), closes #8802
- fix(plugin-react): pass correct context to runPluginOverrides (#8809) (09742e2), closes #8809
- fix(plugin-react): return code if should skip in transform (fix #7586) (#8676) (206e22a), closes #7586 #8676
- chore: use
tsx
directly instead of indirectesno
(#8773) (f018f13), closes #8773
- feat: bump minimum node version to 14.18.0 (#8662) (8a05432), closes #8662
- feat: experimental.buildAdvancedBaseOptions (#8450) (8ef7333), closes #8450
- feat: expose createFilter util (#8562) (c5c424a), closes #8562
- chore: update major deps (#8572) (0e20949), closes #8572
- chore: use node prefix (#8309) (60721ac), closes #8309
- chore(deps): update all non-major dependencies (#8669) (628863d), closes #8669
- fix(plugin-react): set
this-is-undefined-in-esm
to silent if classic runtime (#8674) (f0aecba), closes #8674
- fix(deps): update all non-major dependencies (#8391) (842f995), closes #8391
- fix(plugin-react): apply manual runtime interop (#8546) (f09299c), closes #8546
- fix(plugin-react): support import namespace in
parseReactAlias
(#5313) (05b91cd), closes #5313 - refactor: remove hooks ssr param support (#8491) (f59adf8), closes #8491
- feat: non-blocking esbuild optimization at build time (#8280) (909cf9c), closes #8280
- feat(plugin-react): allow options.babel to be a function (#6238) (f4d6262), closes #6238
- fix(deps): update all non-major dependencies (#8281) (c68db4d), closes #8281
- fix(plugin-react): broken optimized deps dir check (#8255) (9e2a1ea), closes #8255
- chore: use
esno
to replacets-node
(#8162) (c18a5f3), closes #8162
- fix: rewrite CJS specific funcs/vars in plugins (#8227) (9baa70b), closes #8227
- build!: bump targets (#8045) (66efd69), closes #8045
- chore: enable
import/no-duplicates
eslint rule (#8199) (11243de), closes #8199
- chore: restore-jsx.spec.ts lint (#8004) (f1af941), closes #8004
- chore: revert vitejs/vite#8152 (#8161) (85b8b55), closes vitejs/vite#8152 #8161
- chore: update plugins peer deps (d57c23c)
- chore: use
unbuild
to bundle plugins (#8139) (638b168), closes #8139 - chore(deps): use
esno
to replacets-node
(#8152) (2363bd3), closes #8152 - chore(lint): sort for imports (#8113) (43a58dd), closes #8113
- chore(plugin-react): add vite peer dep (#8083) (2d978f7), closes #8083
- fix: use Vitest for unit testing, clean regex bug (#8040) (63cd53d), closes #8040
- refactor: remove deprecated api for 3.0 (#5868) (b5c3709), closes #5868
- build!: remove node v12 support (#7833) (eeac2d2), closes #7833
- fix(plugin-react): React is not defined when component name is lowercase (#6838) (bf40e5c), closes #6838
- chore(deps): update all non-major dependencies (#7780) (eba9d05), closes #7780
- chore(deps): update all non-major dependencies (#7949) (b877d30), closes #7949
- fix(deps): update all non-major dependencies (#7668) (485263c), closes #7668
- chore: fix term cases (#7553) (c296130), closes #7553
- chore(deps): update all non-major dependencies (#7603) (fc51a15), closes #7603
- feat(plugin-react): adding jsxPure option (#7088) (d451435), closes #7088
- fix(deps): update all non-major dependencies (#6782) (e38be3e), closes #6782
- fix(deps): update all non-major dependencies (#7392) (b63fc3b), closes #7392
- chore: fix publish, build vite before plugin-react and plugin-vue (#6988) (620a9bd), closes #6988
- chore(deps): update all non-major dependencies (#6905) (839665c), closes #6905
- workflow: separate version bumping and publishing on release (#6879) (fe8ef39), closes #6879
1.2.0 (2022-02-09)
- plugin-react: ensure
overrides
array exists beforeapi.reactBabel
hooks are called (#6750) (104bdb5)
1.1.4 (2022-01-04)
- plugin-react: check for import React statement in .js files (#6320) (bd9e97b), closes #6148 #6148
- plugin-react: restore-jsx bug when component name is lowercase (#6110) (ce65c56)
1.1.3 (2021-12-13)
1.1.2 (2021-12-13)
1.1.1 (2021-12-07)
1.1.0 (2021-11-22)
1.1.0-beta.1 (2021-11-19)
- plugin-react: apply
babel.plugins
to project files only (#5255) (377d0be) - plugin-react: remove querystring from sourcemap filename (#5760) (d93a9fa)
- plugin-react: restore usage of extension instead of id (#5761) (59471b1)
- plugin-react: uncompiled JSX in linked pkgs (#5669) (41a7c9c)
1.1.0-beta.0 (2021-10-28)
1.0.6 (2021-10-25)
1.0.5 (2021-10-18)
- plugin-react: fix regex for react imports (#5274) (00b3e4f)
- plugin-react: transform .mjs files (#5314) (8ce2ea1)
1.0.4 (2021-10-11)
1.0.3 (2021-10-11)
1.0.2 (2021-10-05)
1.0.1 (2021-09-22)
1.0.0 (2021-09-22)
See the readme for more information.
- Support for automatic JSX runtime
- Babel integration for both development and production builds
- Add
react
andreact-dom
toresolve.dedupe
automatically
Thanks to @aleclarson and @pengx17 for preparing this release!
Before @vitejs/plugin-react
, there was @vitejs/plugin-react-refresh
.
See its changelog here.