fix(plugin-react): apply manual runtime interop (#8546)

Author: bluwy

packages/plugin-react/package.json

@@ -45,8 +45,7 @@
     "@babel/plugin-transform-react-jsx-self": "^7.17.12",
     "@babel/plugin-transform-react-jsx-source": "^7.16.7",
     "@rollup/pluginutils": "^4.2.1",
-    "react-refresh": "^0.13.0",
-    "resolve": "^1.22.0"
+    "react-refresh": "^0.13.0"
   },
   "peerDependencies": {
     "vite": "^3.0.0-alpha"

packages/plugin-react/src/index.ts

@@ -361,40 +361,53 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
     }
   }
 
-  // const runtimeId = 'react/jsx-runtime'
+  const reactJsxRuntimeId = 'react/jsx-runtime'
+  const reactJsxDevRuntimeId = 'react/jsx-dev-runtime'
+  const virtualReactJsxRuntimeId = '\0' + reactJsxRuntimeId
+  const virtualReactJsxDevRuntimeId = '\0' + reactJsxDevRuntimeId
   // 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']
+          include: [reactJsxRuntimeId, reactJsxDevRuntimeId]
         }
       }
-    }
-    // TODO: this optimization may not be necesary and it is breacking esbuild+rollup compat,
-    // see https://github.com/vitejs/vite/pull/7246#discussion_r861552185
-    // We could still do the same trick and resolve to the optimized dependency here
-    /*
-    resolveId(id: string) {
-      return id === runtimeId ? id : null
     },
-    load(id: string) {
-      if (id === runtimeId) {
-        const runtimePath = resolve.sync(runtimeId, {
-          basedir: projectRoot
-        })
-        const exports = ['jsx', 'jsxs', 'Fragment']
+    resolveId(id, importer) {
+      // Resolve runtime to a virtual path to be interoped.
+      // Since the interop code re-imports `id`, we need to prevent re-resolving
+      // to the virtual id if the importer is already the virtual id.
+      if (id === reactJsxRuntimeId && importer !== virtualReactJsxRuntimeId) {
+        return virtualReactJsxRuntimeId
+      }
+      if (
+        id === reactJsxDevRuntimeId &&
+        importer !== virtualReactJsxDevRuntimeId
+      ) {
+        return virtualReactJsxDevRuntimeId
+      }
+    },
+    load(id) {
+      // Apply manual interop
+      if (id === virtualReactJsxRuntimeId) {
         return [
-          `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}`)
+          `import * as jsxRuntime from ${JSON.stringify(reactJsxRuntimeId)}`,
+          `export const Fragment = jsxRuntime.Fragment`,
+          `export const jsx = jsxRuntime.jsx`,
+          `export const jsxs = jsxRuntime.jsxs`
         ].join('\n')
       }
-    } */
+      if (id === virtualReactJsxDevRuntimeId) {
+        return [
+          `import * as jsxRuntime from ${JSON.stringify(reactJsxDevRuntimeId)}`,
+          `export const Fragment = jsxRuntime.Fragment`,
+          `export const jsxDEV = jsxRuntime.jsxDEV`
+        ].join('\n')
+      }
+    }
   }
 
   return [viteBabel, viteReactRefresh, useAutomaticRuntime && viteReactJsx]

playground/react/App.jsx

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import Dummy from './components/Dummy?qs-should-not-break-plugin-react'
+import Button from 'jsx-entry'
 
 function App() {
   const [count, setCount] = useState(0)
@@ -26,6 +27,7 @@ function App() {
       </header>
 
       <Dummy />
+      <Button>button</Button>
     </div>
   )
 }

playground/react/jsx-entry/Button.jsx

@@ -0,0 +1,5 @@
+const Button = ({ children }) => {
+  return <button>{children}</button>
+}
+
+export default Button

playground/react/jsx-entry/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "jsx-entry",
+  "private": true,
+  "version": "0.0.0",
+  "main": "Button.jsx"
+}

playground/react/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "jsx-entry": "file:./jsx-entry",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

playground/react/vite.config.ts

@@ -2,6 +2,7 @@ import react from '@vitejs/plugin-react'
 import type { UserConfig } from 'vite'
 
 const config: UserConfig = {
+  mode: 'development',
   plugins: [react()],
   build: {
     // to make tests faster