Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 1 addition & 12 deletions packages/plugin-react/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@
The all-in-one Vite plugin for React projects.

- enable [Fast Refresh](https://www.npmjs.com/package/react-refresh) in development
- use the [automatic JSX runtime](https://github.com/alloc/vite-react-jsx#faq)
- avoid manual `import React` in `.jsx` and `.tsx` modules
- use the [automatic JSX runtime](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)
- dedupe the `react` and `react-dom` packages
- use custom Babel plugins/presets

Expand Down Expand Up @@ -43,16 +42,6 @@ react({
})
```

## Opting out of the automatic JSX runtime

By default, the plugin uses the [automatic JSX runtime](https://github.com/alloc/vite-react-jsx#faq). However, if you encounter any issues, you may opt out using the `jsxRuntime` option.

```js
react({
jsxRuntime: 'classic',
})
```

## Babel configuration

The `babel` option lets you add plugins, presets, and [other configuration](https://babeljs.io/docs/en/options) to the Babel transformation performed on each JSX/TSX file.
Expand Down
26 changes: 6 additions & 20 deletions packages/plugin-react/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ export interface Options {
*/
fastRefresh?: boolean
/**
* Set this to `"automatic"` to use [vite-react-jsx](https://github.com/alloc/vite-react-jsx).
* @deprecated All tools now support the automatic runtime, and it has been backported
* up to React 16. This allows to skip the React import and can produce smaller bundlers.
* @default "automatic"
*/
jsxRuntime?: 'classic' | 'automatic'
Expand Down Expand Up @@ -98,7 +99,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
let isProduction = true
let projectRoot = process.cwd()
let skipFastRefresh = opts.fastRefresh === false
let skipReactImport = false
const skipReactImport = false
let runPluginOverrides = (
options: ReactBabelOptions,
context: ReactBabelHookContext,
Expand Down Expand Up @@ -167,27 +168,12 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
isProduction = config.isProduction
skipFastRefresh ||= isProduction || config.command === 'build'

const jsxInject = config.esbuild && config.esbuild.jsxInject
if (jsxInject && importReactRE.test(jsxInject)) {
skipReactImport = true
config.logger.warn(
'[@vitejs/plugin-react] This plugin imports React for you automatically,' +
' so you can stop using `esbuild.jsxInject` for that purpose.',
if (opts.jsxRuntime === 'classic') {
config.logger.warnOnce(
'[@vitejs/plugin-react] Support for classic runtime is deprecated.',
)
}

config.plugins.forEach((plugin) => {
const hasConflict =
plugin.name === 'react-refresh' ||
(plugin !== viteReactJsx && plugin.name === 'vite:react-jsx')

if (hasConflict)
return config.logger.warn(
`[@vitejs/plugin-react] You should stop using "${plugin.name}" ` +
`since this plugin conflicts with it.`,
)
})

runPluginOverrides = (babelOptions, context) => {
const hooks = config.plugins
.map((plugin) => plugin.api?.reactBabel)
Expand Down