fix: add jsx dev runtime to optimizeDeps (#147)

ArnaudBarre · web-flow · commit 3bbd8f031317 · 2023-04-17T23:56:49.000+02:00
diff --git 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
@@ -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
@@ -3,7 +3,6 @@ import react from '@vitejs/plugin-react'
 
 export default defineConfig({
   plugins: [react()],
-  optimizeDeps: { include: ['react/jsx-dev-runtime'] },
   build: {
     minify: false,
   },
