feat: allow react/jsx-dev-runtime imports

packages/plugin-react/package.json

@@ -39,7 +39,6 @@
     "@babel/plugin-transform-react-jsx-self": "^7.16.7",
     "@babel/plugin-transform-react-jsx-source": "^7.16.7",
     "@rollup/pluginutils": "^4.2.1",
-    "react-refresh": "^0.12.0",
-    "resolve": "^1.22.0"
+    "react-refresh": "^0.12.0"
   }
 }

packages/plugin-react/src/index.ts

@@ -1,7 +1,7 @@
 import type { ParserOptions, TransformOptions, types as t } from '@babel/core'
 import * as babel from '@babel/core'
 import { createFilter } from '@rollup/pluginutils'
-import resolve from 'resolve'
+import path from 'path'
 import type { Plugin, PluginOption } from 'vite'
 import {
   addRefreshWrapper,
@@ -333,34 +333,68 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
     }
   }
 
-  const runtimeId = 'react/jsx-runtime'
+  const devRuntimeId = 'react/jsx-dev-runtime'
+  const prodRuntimeId = 'react/jsx-runtime'
+  const shimRuntimeId = prodRuntimeId + '.shim.js'
+
+  let devEntry: string
+  let prodEntry: string
+
   // Adapted from https://github.com/alloc/vite-react-jsx
   const viteReactJsx: Plugin = {
     name: 'vite:react-jsx',
     enforce: 'pre',
-    config() {
-      return {
-        optimizeDeps: {
-          include: ['react/jsx-dev-runtime']
-        }
+    async configResolved({ createResolver, logger, optimizeDeps }) {
+      const resolve = createResolver({ asSrc: false })
+      const reactEntry = await resolve('react')
+      if (!reactEntry) {
+        return logger.warn(
+          '[@vitejs/plugin-react] Cannot find where "react" is installed'
+        )
       }
+      const reactPackageRoot = path.dirname(reactEntry)
+      devEntry = path.join(
+        reactPackageRoot,
+        'cjs/react-jsx-dev-runtime.development.js'
+      )
+      prodEntry = path.join(
+        reactPackageRoot,
+        'cjs/react-jsx-runtime.production.min.js'
+      )
+      optimizeDeps.include = [
+        ...(optimizeDeps.include || []).filter(
+          // Disable old workaround so unnecessary work is avoided.
+          (id) => id !== prodRuntimeId && id !== devRuntimeId
+        ),
+        // These must be optimized since they are CommonJS.
+        prodEntry,
+        devEntry
+      ]
     },
     resolveId(id: string) {
-      return id === runtimeId ? id : null
+      // Prevent applications from using both the dev runtime and prod runtime
+      // by resolving both with the same module ID.
+      return id === prodRuntimeId || id === devRuntimeId ? shimRuntimeId : null
     },
-    load(id: string) {
-      if (id === runtimeId) {
-        const runtimePath = resolve.sync(runtimeId, {
-          basedir: projectRoot
-        })
-        const exports = ['jsx', 'jsxs', 'Fragment']
-        return [
+    async load(id: string) {
+      // Even though this shim is really only useful in production, we use it
+      // in development as well, for consistency's sake.
+      if (id === shimRuntimeId) {
+        const runtimePath = isProduction ? prodEntry : devEntry
+
+        // We can't use `export * from` or else any callsite that uses
+        // this module will be compiled to `jsxRuntime.exports.jsx`
+        // instead of the more concise `jsx` alias.
+        const lines = [
           `import * as jsxRuntime from ${JSON.stringify(runtimePath)}`,
-          // We can't use `export * from` or else any callsite that uses
-          // this module will be compiled to `jsxRuntime.exports.jsx`
-          // instead of the more concise `jsx` alias.
-          ...exports.map((name) => `export const ${name} = jsxRuntime.${name}`)
-        ].join('\n')
+          `export const Fragment = jsxRuntime.Fragment`,
+          `export const jsx = jsxRuntime.${isProduction ? 'jsx' : 'jsxDEV'}`,
+          `export const jsxs = jsxRuntime.${isProduction ? 'jsxs' : 'jsxDEV'}`
+        ]
+        if (!isProduction) {
+          lines.push(`export const jsxDEV = jsxRuntime.jsxDEV`)
+        }
+        return lines.join('\n')
       }
     }
   }