@vitejs/plugin-react 2.0.0-alpha.0 → 2.0.0-alpha.3

package/dist/index.cjs

@@ -1,10 +1,11 @@
 'use strict';
 
+const path = require('path');
 const babel = require('@babel/core');
 const pluginutils = require('@rollup/pluginutils');
-const resolve = require('resolve');
+const vite = require('vite');
 const fs = require('fs');
-const path = require('path');
+const module$1 = require('module');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
@@ -20,13 +21,13 @@ function _interopNamespace(e) {
   return n;
 }
 
+const path__default = /*#__PURE__*/_interopDefaultLegacy(path);
 const babel__namespace = /*#__PURE__*/_interopNamespace(babel);
-const resolve__default = /*#__PURE__*/_interopDefaultLegacy(resolve);
 const fs__default = /*#__PURE__*/_interopDefaultLegacy(fs);
-const path__default = /*#__PURE__*/_interopDefaultLegacy(path);
 
 const runtimePublicPath = "/@react-refresh";
-const reactRefreshDir = path__default.dirname(require.resolve("react-refresh/package.json"));
+const _require = module$1.createRequire((typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('index.cjs', document.baseURI).href)));
+const reactRefreshDir = path__default.dirname(_require.resolve("react-refresh/package.json"));
 const runtimeFilePath = path__default.join(reactRefreshDir, "cjs/react-refresh-runtime.development.js");
 const runtimeCode = `
 const exports = {}
@@ -138,9 +139,6 @@ async function getBabelRestoreJSX() {
   return babelRestoreJSX;
 }
 async function restoreJSX(babel, code, filename) {
-  if (filename.includes("/.vite/react-dom.js")) {
-    return jsxNotFound;
-  }
   const [reactAlias, isCommonJS] = parseReactAlias(code);
   if (!reactAlias) {
     return jsxNotFound;
@@ -175,11 +173,11 @@ async function restoreJSX(babel, code, filename) {
   return [result?.ast, isCommonJS];
 }
 function parseReactAlias(code) {
-  let match = code.match(/\b(var|let|const) +(\w+) *= *require\(["']react["']\)/);
+  let match = code.match(/\b(var|let|const)\s+([^=\{\s]+)\s*=\s*require\(["']react["']\)/);
   if (match) {
     return [match[2], true];
   }
-  match = code.match(/^import (\w+).+? from ["']react["']/m);
+  match = code.match(/^import\s+(?:\*\s+as\s+)?(\w+).+?\bfrom\s*["']react["']/m);
   if (match) {
     return [match[1], false];
   }
@@ -187,24 +185,16 @@ function parseReactAlias(code) {
 }
 
 function viteReact(opts = {}) {
-  var _a;
   let base = "/";
+  let resolvedCacheDir;
   let filter = pluginutils.createFilter(opts.include, opts.exclude);
   let isProduction = true;
   let projectRoot = process.cwd();
   let skipFastRefresh = opts.fastRefresh === false;
   let skipReactImport = false;
+  let runPluginOverrides = (options, context) => false;
+  let staticBabelOptions;
   const useAutomaticRuntime = opts.jsxRuntime !== "classic";
-  const babelOptions = {
-    babelrc: false,
-    configFile: false,
-    ...opts.babel
-  };
-  babelOptions.plugins || (babelOptions.plugins = []);
-  babelOptions.presets || (babelOptions.presets = []);
-  babelOptions.overrides || (babelOptions.overrides = []);
-  babelOptions.parserOpts || (babelOptions.parserOpts = {});
-  (_a = babelOptions.parserOpts).plugins || (_a.plugins = []);
   const importReactRE = /(^|\n)import\s+(\*\s+as\s+)?React(,|\s+)/;
   const fileExtensionRE = /\.[^\/\s\?]+$/;
   const viteBabel = {
@@ -213,6 +203,7 @@ function viteReact(opts = {}) {
     configResolved(config) {
       base = config.base;
       projectRoot = config.root;
+      resolvedCacheDir = vite.normalizePath(path__default.resolve(config.cacheDir));
       filter = pluginutils.createFilter(opts.include, opts.exclude, {
         resolve: projectRoot
       });
@@ -227,19 +218,38 @@ function viteReact(opts = {}) {
         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.`);
-        if (plugin.api?.reactBabel) {
-          plugin.api.reactBabel(babelOptions, config);
-        }
       });
+      runPluginOverrides = (babelOptions, context) => {
+        const hooks = config.plugins.map((plugin) => plugin.api?.reactBabel).filter(Boolean);
+        if (hooks.length > 0) {
+          return (runPluginOverrides = (babelOptions2) => {
+            hooks.forEach((hook) => hook(babelOptions2, context, config));
+            return true;
+          })(babelOptions);
+        }
+        runPluginOverrides = () => false;
+        return false;
+      };
     },
     async transform(code, id, options) {
-      const ssr = typeof options === "boolean" ? options : options?.ssr === true;
+      const ssr = options?.ssr === true;
       const [filepath, querystring = ""] = id.split("?");
       const [extension = ""] = querystring.match(fileExtensionRE) || filepath.match(fileExtensionRE) || [];
       if (/\.(mjs|[tj]sx?)$/.test(extension)) {
         const isJSX = extension.endsWith("x");
         const isNodeModules = id.includes("/node_modules/");
         const isProjectFile = !isNodeModules && (id[0] === "\0" || id.startsWith(projectRoot + "/"));
+        let babelOptions = staticBabelOptions;
+        if (typeof opts.babel === "function") {
+          const rawOptions = opts.babel(id, { ssr });
+          babelOptions = createBabelOptions(rawOptions);
+          runPluginOverrides(babelOptions, { ssr, id });
+        } else if (!babelOptions) {
+          babelOptions = createBabelOptions(opts.babel);
+          if (!runPluginOverrides(babelOptions, { ssr, id })) {
+            staticBabelOptions = babelOptions;
+          }
+        }
         const plugins = isProjectFile ? [...babelOptions.plugins] : [];
         let useFastRefresh = false;
         if (!skipFastRefresh && !ssr && !isNodeModules) {
@@ -255,7 +265,8 @@ function viteReact(opts = {}) {
         let ast;
         if (!isProjectFile || isJSX) {
           if (useAutomaticRuntime) {
-            const [restoredAst, isCommonJS] = !isProjectFile && !isJSX ? await restoreJSX(babel__namespace, code, id) : [null, false];
+            const isOptimizedReactDom = id.startsWith(resolvedCacheDir) && id.includes("/react-dom.js");
+            const [restoredAst, isCommonJS] = !isProjectFile && !isJSX && !isOptimizedReactDom ? await restoreJSX(babel__namespace, code, id) : [null, false];
             if (isJSX || (ast = restoredAst)) {
               plugins.push([
                 await loadPlugin("@babel/plugin-transform-react-jsx" + (isProduction ? "" : "-development")),
@@ -361,29 +372,42 @@ function viteReact(opts = {}) {
         ];
     }
   };
-  const runtimeId = "react/jsx-runtime";
+  const reactJsxRuntimeId = "react/jsx-runtime";
+  const reactJsxDevRuntimeId = "react/jsx-dev-runtime";
+  const virtualReactJsxRuntimeId = "\0" + reactJsxRuntimeId;
+  const virtualReactJsxDevRuntimeId = "\0" + reactJsxDevRuntimeId;
   const viteReactJsx = {
     name: "vite:react-jsx",
     enforce: "pre",
     config() {
       return {
         optimizeDeps: {
-          include: ["react/jsx-dev-runtime"]
+          include: [reactJsxRuntimeId, reactJsxDevRuntimeId]
         }
       };
     },
-    resolveId(id) {
-      return id === runtimeId ? id : null;
+    resolveId(id, importer) {
+      if (id === reactJsxRuntimeId && importer !== virtualReactJsxRuntimeId) {
+        return virtualReactJsxRuntimeId;
+      }
+      if (id === reactJsxDevRuntimeId && importer !== virtualReactJsxDevRuntimeId) {
+        return virtualReactJsxDevRuntimeId;
+      }
     },
     load(id) {
-      if (id === runtimeId) {
-        const runtimePath = resolve__default.sync(runtimeId, {
-          basedir: projectRoot
-        });
-        const exports = ["jsx", "jsxs", "Fragment"];
+      if (id === virtualReactJsxRuntimeId) {
         return [
-          `import * as jsxRuntime from ${JSON.stringify(runtimePath)}`,
-          ...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");
       }
     }
@@ -391,8 +415,22 @@ function viteReact(opts = {}) {
   return [viteBabel, viteReactRefresh, useAutomaticRuntime && viteReactJsx];
 }
 viteReact.preambleCode = preambleCode;
-function loadPlugin(path) {
-  return import(path).then((module) => module.default || module);
+function loadPlugin(path2) {
+  return import(path2).then((module) => module.default || module);
+}
+function createBabelOptions(rawOptions) {
+  var _a;
+  const babelOptions = {
+    babelrc: false,
+    configFile: false,
+    ...rawOptions
+  };
+  babelOptions.plugins || (babelOptions.plugins = []);
+  babelOptions.presets || (babelOptions.presets = []);
+  babelOptions.overrides || (babelOptions.overrides = []);
+  babelOptions.parserOpts || (babelOptions.parserOpts = {});
+  (_a = babelOptions.parserOpts).plugins || (_a.plugins = []);
+  return babelOptions;
 }
 
 module.exports = viteReact;

package/dist/index.d.ts

@@ -29,7 +29,9 @@ interface Options {
     /**
      * Babel configuration applied in both dev and prod.
      */
-    babel?: BabelOptions;
+    babel?: BabelOptions | ((id: string, options: {
+        ssr?: boolean;
+    }) => BabelOptions);
 }
 declare type BabelOptions = Omit<TransformOptions, 'ast' | 'filename' | 'root' | 'sourceFileName' | 'sourceMaps' | 'inputSourceMap'>;
 /**
@@ -44,13 +46,18 @@ interface ReactBabelOptions extends BabelOptions {
         plugins: Extract<ParserOptions['plugins'], any[]>;
     };
 }
+declare type ReactBabelHook = (babelConfig: ReactBabelOptions, context: ReactBabelHookContext, config: ResolvedConfig) => void;
+declare type ReactBabelHookContext = {
+    ssr: boolean;
+    id: string;
+};
 declare module 'vite' {
     interface Plugin {
         api?: {
             /**
              * Manipulate the Babel options of `@vitejs/plugin-react`
              */
-            reactBabel?: (options: ReactBabelOptions, config: ResolvedConfig) => void;
+            reactBabel?: ReactBabelHook;
         };
     }
 }

package/dist/index.mjs

@@ -1,11 +1,13 @@
+import path from 'path';
 import * as babel from '@babel/core';
 import { createFilter } from '@rollup/pluginutils';
-import resolve from 'resolve';
+import { normalizePath } from 'vite';
 import fs from 'fs';
-import path from 'path';
+import { createRequire } from 'module';
 
 const runtimePublicPath = "/@react-refresh";
-const reactRefreshDir = path.dirname(require.resolve("react-refresh/package.json"));
+const _require = createRequire(import.meta.url);
+const reactRefreshDir = path.dirname(_require.resolve("react-refresh/package.json"));
 const runtimeFilePath = path.join(reactRefreshDir, "cjs/react-refresh-runtime.development.js");
 const runtimeCode = `
 const exports = {}
@@ -117,9 +119,6 @@ async function getBabelRestoreJSX() {
   return babelRestoreJSX;
 }
 async function restoreJSX(babel, code, filename) {
-  if (filename.includes("/.vite/react-dom.js")) {
-    return jsxNotFound;
-  }
   const [reactAlias, isCommonJS] = parseReactAlias(code);
   if (!reactAlias) {
     return jsxNotFound;
@@ -154,11 +153,11 @@ async function restoreJSX(babel, code, filename) {
   return [result?.ast, isCommonJS];
 }
 function parseReactAlias(code) {
-  let match = code.match(/\b(var|let|const) +(\w+) *= *require\(["']react["']\)/);
+  let match = code.match(/\b(var|let|const)\s+([^=\{\s]+)\s*=\s*require\(["']react["']\)/);
   if (match) {
     return [match[2], true];
   }
-  match = code.match(/^import (\w+).+? from ["']react["']/m);
+  match = code.match(/^import\s+(?:\*\s+as\s+)?(\w+).+?\bfrom\s*["']react["']/m);
   if (match) {
     return [match[1], false];
   }
@@ -166,24 +165,16 @@ function parseReactAlias(code) {
 }
 
 function viteReact(opts = {}) {
-  var _a;
   let base = "/";
+  let resolvedCacheDir;
   let filter = createFilter(opts.include, opts.exclude);
   let isProduction = true;
   let projectRoot = process.cwd();
   let skipFastRefresh = opts.fastRefresh === false;
   let skipReactImport = false;
+  let runPluginOverrides = (options, context) => false;
+  let staticBabelOptions;
   const useAutomaticRuntime = opts.jsxRuntime !== "classic";
-  const babelOptions = {
-    babelrc: false,
-    configFile: false,
-    ...opts.babel
-  };
-  babelOptions.plugins || (babelOptions.plugins = []);
-  babelOptions.presets || (babelOptions.presets = []);
-  babelOptions.overrides || (babelOptions.overrides = []);
-  babelOptions.parserOpts || (babelOptions.parserOpts = {});
-  (_a = babelOptions.parserOpts).plugins || (_a.plugins = []);
   const importReactRE = /(^|\n)import\s+(\*\s+as\s+)?React(,|\s+)/;
   const fileExtensionRE = /\.[^\/\s\?]+$/;
   const viteBabel = {
@@ -192,6 +183,7 @@ function viteReact(opts = {}) {
     configResolved(config) {
       base = config.base;
       projectRoot = config.root;
+      resolvedCacheDir = normalizePath(path.resolve(config.cacheDir));
       filter = createFilter(opts.include, opts.exclude, {
         resolve: projectRoot
       });
@@ -206,19 +198,38 @@ function viteReact(opts = {}) {
         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.`);
-        if (plugin.api?.reactBabel) {
-          plugin.api.reactBabel(babelOptions, config);
-        }
       });
+      runPluginOverrides = (babelOptions, context) => {
+        const hooks = config.plugins.map((plugin) => plugin.api?.reactBabel).filter(Boolean);
+        if (hooks.length > 0) {
+          return (runPluginOverrides = (babelOptions2) => {
+            hooks.forEach((hook) => hook(babelOptions2, context, config));
+            return true;
+          })(babelOptions);
+        }
+        runPluginOverrides = () => false;
+        return false;
+      };
     },
     async transform(code, id, options) {
-      const ssr = typeof options === "boolean" ? options : options?.ssr === true;
+      const ssr = options?.ssr === true;
       const [filepath, querystring = ""] = id.split("?");
       const [extension = ""] = querystring.match(fileExtensionRE) || filepath.match(fileExtensionRE) || [];
       if (/\.(mjs|[tj]sx?)$/.test(extension)) {
         const isJSX = extension.endsWith("x");
         const isNodeModules = id.includes("/node_modules/");
         const isProjectFile = !isNodeModules && (id[0] === "\0" || id.startsWith(projectRoot + "/"));
+        let babelOptions = staticBabelOptions;
+        if (typeof opts.babel === "function") {
+          const rawOptions = opts.babel(id, { ssr });
+          babelOptions = createBabelOptions(rawOptions);
+          runPluginOverrides(babelOptions, { ssr, id });
+        } else if (!babelOptions) {
+          babelOptions = createBabelOptions(opts.babel);
+          if (!runPluginOverrides(babelOptions, { ssr, id })) {
+            staticBabelOptions = babelOptions;
+          }
+        }
         const plugins = isProjectFile ? [...babelOptions.plugins] : [];
         let useFastRefresh = false;
         if (!skipFastRefresh && !ssr && !isNodeModules) {
@@ -234,7 +245,8 @@ function viteReact(opts = {}) {
         let ast;
         if (!isProjectFile || isJSX) {
           if (useAutomaticRuntime) {
-            const [restoredAst, isCommonJS] = !isProjectFile && !isJSX ? await restoreJSX(babel, code, id) : [null, false];
+            const isOptimizedReactDom = id.startsWith(resolvedCacheDir) && id.includes("/react-dom.js");
+            const [restoredAst, isCommonJS] = !isProjectFile && !isJSX && !isOptimizedReactDom ? await restoreJSX(babel, code, id) : [null, false];
             if (isJSX || (ast = restoredAst)) {
               plugins.push([
                 await loadPlugin("@babel/plugin-transform-react-jsx" + (isProduction ? "" : "-development")),
@@ -340,29 +352,42 @@ function viteReact(opts = {}) {
         ];
     }
   };
-  const runtimeId = "react/jsx-runtime";
+  const reactJsxRuntimeId = "react/jsx-runtime";
+  const reactJsxDevRuntimeId = "react/jsx-dev-runtime";
+  const virtualReactJsxRuntimeId = "\0" + reactJsxRuntimeId;
+  const virtualReactJsxDevRuntimeId = "\0" + reactJsxDevRuntimeId;
   const viteReactJsx = {
     name: "vite:react-jsx",
     enforce: "pre",
     config() {
       return {
         optimizeDeps: {
-          include: ["react/jsx-dev-runtime"]
+          include: [reactJsxRuntimeId, reactJsxDevRuntimeId]
         }
       };
     },
-    resolveId(id) {
-      return id === runtimeId ? id : null;
+    resolveId(id, importer) {
+      if (id === reactJsxRuntimeId && importer !== virtualReactJsxRuntimeId) {
+        return virtualReactJsxRuntimeId;
+      }
+      if (id === reactJsxDevRuntimeId && importer !== virtualReactJsxDevRuntimeId) {
+        return virtualReactJsxDevRuntimeId;
+      }
     },
     load(id) {
-      if (id === runtimeId) {
-        const runtimePath = resolve.sync(runtimeId, {
-          basedir: projectRoot
-        });
-        const exports = ["jsx", "jsxs", "Fragment"];
+      if (id === virtualReactJsxRuntimeId) {
         return [
-          `import * as jsxRuntime from ${JSON.stringify(runtimePath)}`,
-          ...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");
       }
     }
@@ -370,8 +395,22 @@ function viteReact(opts = {}) {
   return [viteBabel, viteReactRefresh, useAutomaticRuntime && viteReactJsx];
 }
 viteReact.preambleCode = preambleCode;
-function loadPlugin(path) {
-  return import(path).then((module) => module.default || module);
+function loadPlugin(path2) {
+  return import(path2).then((module) => module.default || module);
+}
+function createBabelOptions(rawOptions) {
+  var _a;
+  const babelOptions = {
+    babelrc: false,
+    configFile: false,
+    ...rawOptions
+  };
+  babelOptions.plugins || (babelOptions.plugins = []);
+  babelOptions.presets || (babelOptions.presets = []);
+  babelOptions.overrides || (babelOptions.overrides = []);
+  babelOptions.parserOpts || (babelOptions.parserOpts = {});
+  (_a = babelOptions.parserOpts).plugins || (_a.plugins = []);
+  return babelOptions;
 }
 
 export { viteReact as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-react",
-  "version": "2.0.0-alpha.0",
+  "version": "2.0.0-alpha.3",
   "license": "MIT",
   "author": "Evan You",
   "contributors": [
@@ -23,7 +23,7 @@
   "scripts": {
     "dev": "unbuild --stub",
     "build": "unbuild && pnpm run patch-cjs",
-    "patch-cjs": "ts-node ../../scripts/patchCJS.ts",
+    "patch-cjs": "esno ../../scripts/patchCJS.ts",
     "prepublishOnly": "npm run build"
   },
   "engines": {
@@ -39,14 +39,13 @@
   },
   "homepage": "https://github.com/vitejs/vite/tree/main/packages/plugin-react#readme",
   "dependencies": {
-    "@babel/core": "^7.17.10",
-    "@babel/plugin-transform-react-jsx": "^7.17.3",
+    "@babel/core": "^7.18.2",
+    "@babel/plugin-transform-react-jsx": "^7.17.12",
     "@babel/plugin-transform-react-jsx-development": "^7.16.7",
-    "@babel/plugin-transform-react-jsx-self": "^7.16.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"

package/src/fast-refresh.ts

@@ -1,11 +1,13 @@
 import fs from 'fs'
 import path from 'path'
+import { createRequire } from 'module'
 import type { types as t } from '@babel/core'
 
 export const runtimePublicPath = '/@react-refresh'
 
+const _require = createRequire(import.meta.url)
 const reactRefreshDir = path.dirname(
-  require.resolve('react-refresh/package.json')
+  _require.resolve('react-refresh/package.json')
 )
 const runtimeFilePath = path.join(
   reactRefreshDir,

package/src/index.ts

@@ -1,7 +1,8 @@
+import path from 'path'
 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 { normalizePath } from 'vite'
 import type { Plugin, PluginOption, ResolvedConfig } from 'vite'
 import {
   addRefreshWrapper,
@@ -41,7 +42,9 @@ export interface Options {
   /**
    * Babel configuration applied in both dev and prod.
    */
-  babel?: BabelOptions
+  babel?:
+    | BabelOptions
+    | ((id: string, options: { ssr?: boolean }) => BabelOptions)
 }
 
 export type BabelOptions = Omit<
@@ -67,13 +70,21 @@ export interface ReactBabelOptions extends BabelOptions {
   }
 }
 
+type ReactBabelHook = (
+  babelConfig: ReactBabelOptions,
+  context: ReactBabelHookContext,
+  config: ResolvedConfig
+) => void
+
+type ReactBabelHookContext = { ssr: boolean; id: string }
+
 declare module 'vite' {
   export interface Plugin {
     api?: {
       /**
        * Manipulate the Babel options of `@vitejs/plugin-react`
        */
-      reactBabel?: (options: ReactBabelOptions, config: ResolvedConfig) => void
+      reactBabel?: ReactBabelHook
     }
   }
 }
@@ -81,26 +92,20 @@ declare module 'vite' {
 export default function viteReact(opts: Options = {}): PluginOption[] {
   // Provide default values for Rollup compat.
   let base = '/'
+  let resolvedCacheDir: string
   let filter = createFilter(opts.include, opts.exclude)
   let isProduction = true
   let projectRoot = process.cwd()
   let skipFastRefresh = opts.fastRefresh === false
   let skipReactImport = false
+  let runPluginOverrides = (
+    options: ReactBabelOptions,
+    context: ReactBabelHookContext
+  ) => false
+  let staticBabelOptions: ReactBabelOptions | undefined
 
   const useAutomaticRuntime = opts.jsxRuntime !== 'classic'
 
-  const babelOptions = {
-    babelrc: false,
-    configFile: false,
-    ...opts.babel
-  } as ReactBabelOptions
-
-  babelOptions.plugins ||= []
-  babelOptions.presets ||= []
-  babelOptions.overrides ||= []
-  babelOptions.parserOpts ||= {} as any
-  babelOptions.parserOpts.plugins ||= []
-
   // Support patterns like:
   // - import * as React from 'react';
   // - import React from 'react';
@@ -116,6 +121,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
     configResolved(config) {
       base = config.base
       projectRoot = config.root
+      resolvedCacheDir = normalizePath(path.resolve(config.cacheDir))
       filter = createFilter(opts.include, opts.exclude, {
         resolve: projectRoot
       })
@@ -141,14 +147,25 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
             `[@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)
+          .filter(Boolean) as ReactBabelHook[]
 
-        if (plugin.api?.reactBabel) {
-          plugin.api.reactBabel(babelOptions, config)
+        if (hooks.length > 0) {
+          return (runPluginOverrides = (babelOptions) => {
+            hooks.forEach((hook) => hook(babelOptions, context, config))
+            return true
+          })(babelOptions)
         }
-      })
+        runPluginOverrides = () => false
+        return false
+      }
     },
     async transform(code, id, options) {
-      const ssr = typeof options === 'boolean' ? options : options?.ssr === true
+      const ssr = options?.ssr === true
       // File extension could be mocked/overridden in querystring.
       const [filepath, querystring = ''] = id.split('?')
       const [extension = ''] =
@@ -162,6 +179,18 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
         const isProjectFile =
           !isNodeModules && (id[0] === '\0' || id.startsWith(projectRoot + '/'))
 
+        let babelOptions = staticBabelOptions
+        if (typeof opts.babel === 'function') {
+          const rawOptions = opts.babel(id, { ssr })
+          babelOptions = createBabelOptions(rawOptions)
+          runPluginOverrides(babelOptions, { ssr, id: id })
+        } else if (!babelOptions) {
+          babelOptions = createBabelOptions(opts.babel)
+          if (!runPluginOverrides(babelOptions, { ssr, id: id })) {
+            staticBabelOptions = babelOptions
+          }
+        }
+
         const plugins = isProjectFile ? [...babelOptions.plugins] : []
 
         let useFastRefresh = false
@@ -183,8 +212,12 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
             // By reverse-compiling "React.createElement" calls into JSX,
             // React elements provided by dependencies will also use the
             // automatic runtime!
+            // Avoid parsing the optimized react-dom since it will never
+            // contain compiled JSX and it's a pretty big file (800kb).
+            const isOptimizedReactDom =
+              id.startsWith(resolvedCacheDir) && id.includes('/react-dom.js')
             const [restoredAst, isCommonJS] =
-              !isProjectFile && !isJSX
+              !isProjectFile && !isJSX && !isOptimizedReactDom
                 ? await restoreJSX(babel, code, id)
                 : [null, false]
 
@@ -328,7 +361,10 @@ 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',
@@ -336,25 +372,39 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
     config() {
       return {
         optimizeDeps: {
-          include: ['react/jsx-dev-runtime']
+          include: [reactJsxRuntimeId, reactJsxDevRuntimeId]
         }
       }
     },
-    resolveId(id: string) {
-      return id === runtimeId ? id : null
+    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: string) {
-      if (id === runtimeId) {
-        const runtimePath = resolve.sync(runtimeId, {
-          basedir: projectRoot
-        })
-        const exports = ['jsx', 'jsxs', 'Fragment']
+    load(id) {
+      // Apply manual interop
+      if (id === virtualReactJsxRuntimeId) {
+        return [
+          `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(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(reactJsxDevRuntimeId)}`,
+          `export const Fragment = jsxRuntime.Fragment`,
+          `export const jsxDEV = jsxRuntime.jsxDEV`
         ].join('\n')
       }
     }
@@ -368,3 +418,19 @@ viteReact.preambleCode = preambleCode
 function loadPlugin(path: string): Promise<any> {
   return import(path).then((module) => module.default || module)
 }
+
+function createBabelOptions(rawOptions?: BabelOptions) {
+  const babelOptions = {
+    babelrc: false,
+    configFile: false,
+    ...rawOptions
+  } as ReactBabelOptions
+
+  babelOptions.plugins ||= []
+  babelOptions.presets ||= []
+  babelOptions.overrides ||= []
+  babelOptions.parserOpts ||= {} as any
+  babelOptions.parserOpts.plugins ||= []
+
+  return babelOptions
+}

package/src/jsx-runtime/babel-import-to-require.ts

@@ -1,5 +1,4 @@
 import type * as babelCore from '@babel/core'
-import type { Visitor, types as t } from '@babel/core'
 
 /**
  * Replace this:
@@ -11,13 +10,13 @@ import type { Visitor, types as t } from '@babel/core'
  *     var _jsx = require("react/jsx-runtime").jsx
  */
 export function babelImportToRequire({ types: t }: typeof babelCore): {
-  visitor: Visitor
+  visitor: babelCore.Visitor
 } {
   return {
     visitor: {
       ImportDeclaration(path) {
         const decl = path.node
-        const spec = decl.specifiers[0] as t.ImportSpecifier
+        const spec = decl.specifiers[0] as babelCore.types.ImportSpecifier
 
         path.replaceWith(
           t.variableDeclaration('var', [

package/src/jsx-runtime/restore-jsx.spec.ts

@@ -1,6 +1,67 @@
 import * as babel from '@babel/core'
 import { describe, expect, it } from 'vitest'
-import { restoreJSX } from './restore-jsx'
+import { parseReactAlias, restoreJSX } from './restore-jsx'
+
+describe('parseReactAlias', () => {
+  it('handles cjs require', () => {
+    expect(parseReactAlias(`const React = require("react")`))
+      .toMatchInlineSnapshot(`
+        [
+          "React",
+          true,
+        ]
+      `)
+  })
+
+  it('handles cjs require (minified)', () => {
+    expect(parseReactAlias(`var F=require('foo');var R=require('react')`))
+      .toMatchInlineSnapshot(`
+        [
+          "R",
+          true,
+        ]
+      `)
+  })
+
+  it('does not handle destructured cjs require', () => {
+    expect(parseReactAlias(`var {createElement} = require("react")`))
+      .toMatchInlineSnapshot(`
+        [
+          undefined,
+          false,
+        ]
+      `)
+  })
+
+  it('handles esm import', () => {
+    expect(parseReactAlias(`import React from 'react'`)).toMatchInlineSnapshot(`
+      [
+        "React",
+        false,
+      ]
+    `)
+  })
+
+  it('handles esm import namespace', () => {
+    expect(parseReactAlias(`import * as React from "react"`))
+      .toMatchInlineSnapshot(`
+        [
+          "React",
+          false,
+        ]
+      `)
+  })
+
+  it('does not handle destructured esm import', () => {
+    expect(parseReactAlias(`import {createElement} from "react"`))
+      .toMatchInlineSnapshot(`
+        [
+          undefined,
+          false,
+        ]
+      `)
+  })
+})
 
 async function jsx(sourceCode: string) {
   const [ast] = await restoreJSX(babel, sourceCode, 'test.js')

package/src/jsx-runtime/restore-jsx.ts

@@ -1,9 +1,11 @@
 import type * as babelCore from '@babel/core'
-import type { PluginItem, types as t } from '@babel/core'
 
-type RestoredJSX = [result: t.File | null | undefined, isCommonJS: boolean]
+type RestoredJSX = [
+  result: babelCore.types.File | null | undefined,
+  isCommonJS: boolean
+]
 
-let babelRestoreJSX: Promise<PluginItem> | undefined
+let babelRestoreJSX: Promise<babelCore.PluginItem> | undefined
 
 const jsxNotFound: RestoredJSX = [null, false]
 
@@ -25,12 +27,6 @@ export async function restoreJSX(
   code: string,
   filename: string
 ): Promise<RestoredJSX> {
-  // Avoid parsing the optimized react-dom since it will never
-  // contain compiled JSX and it's a pretty big file (800kb).
-  if (filename.includes('/.vite/react-dom.js')) {
-    return jsxNotFound
-  }
-
   const [reactAlias, isCommonJS] = parseReactAlias(code)
 
   if (!reactAlias) {
@@ -83,16 +79,16 @@ export async function restoreJSX(
   return [result?.ast, isCommonJS]
 }
 
-function parseReactAlias(
+export function parseReactAlias(
   code: string
 ): [alias: string | undefined, isCommonJS: boolean] {
   let match = code.match(
-    /\b(var|let|const) +(\w+) *= *require\(["']react["']\)/
+    /\b(var|let|const)\s+([^=\{\s]+)\s*=\s*require\(["']react["']\)/
   )
   if (match) {
     return [match[2], true]
   }
-  match = code.match(/^import (\w+).+? from ["']react["']/m)
+  match = code.match(/^import\s+(?:\*\s+as\s+)?(\w+).+?\bfrom\s*["']react["']/m)
   if (match) {
     return [match[1], false]
   }