diff --git a/packages/plugin-react/README.md b/packages/plugin-react/README.md index e3bf5e65..5e5fbc49 100644 --- a/packages/plugin-react/README.md +++ b/packages/plugin-react/README.md @@ -40,7 +40,7 @@ export default defineConfig({ ### jsxImportSource -Control where the JSX factory is imported from. For TS projects this is inferred from the tsconfig. If you have some React code outside JSX/TSX files, this will be used to detect the presence of React code and apply Fast Refresh. +Control where the JSX factory is imported from. Default to `'react'` ```js react({ jsxImportSource: '@emotion/react' }) diff --git a/packages/plugin-react/src/index.ts b/packages/plugin-react/src/index.ts index f395585f..1643d3ea 100644 --- a/packages/plugin-react/src/index.ts +++ b/packages/plugin-react/src/index.ts @@ -29,7 +29,7 @@ export interface Options { /** * Control where the JSX factory is imported from. * https://esbuild.github.io/api/#jsx-import-source - * For TS projects this is read from tsconfig + * @default 'react' */ jsxImportSource?: string /** @@ -91,6 +91,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] { // Provide default values for Rollup compat. let devBase = '/' const filter = createFilter(opts.include ?? defaultIncludeRE, opts.exclude) + const devRuntime = `${opts.jsxImportSource ?? 'react'}/jsx-dev-runtime` let needHiresSourcemap = false let isProduction = true let projectRoot = process.cwd() @@ -181,9 +182,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] { !ssr && (isJSX || (opts.jsxRuntime === 'classic' - ? code.includes( - `${opts.jsxImportSource ?? 'react'}/jsx-dev-runtime`, - ) + ? code.includes(devRuntime) : importReactRE.test(code))) if (useFastRefresh) { plugins.push([ @@ -280,7 +279,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] { // We can't add `react-dom` because the dependency is `react-dom/client` // for React 18 while it's `react-dom` for React 17. We'd need to detect // what React version the user has installed. - include: ['react'], + include: ['react', devRuntime], }, resolve: { dedupe: ['react', 'react-dom'], diff --git a/playground/ssr-react/vite.config.js b/playground/ssr-react/vite.config.js index 6a35552d..266400b8 100644 --- a/playground/ssr-react/vite.config.js +++ b/playground/ssr-react/vite.config.js @@ -3,7 +3,6 @@ import react from '@vitejs/plugin-react' export default defineConfig({ plugins: [react()], - optimizeDeps: { include: ['react/jsx-dev-runtime'] }, build: { minify: false, },