feat: support automatic jsx runtime while using react@>=16.14.0 (#6612)

Asuka109 · web-flow · commit 53e3ae0efc7c · 2024-12-06T14:56:15.000+08:00
diff --git a/.changeset/funny-beds-arrive.md b/.changeset/funny-beds-arrive.md
@@ -0,0 +1,8 @@
+---
+'@modern-js/plugin-testing': patch
+'@modern-js/uni-builder': patch
+'@modern-js/utils': patch
+---
+
+fix: React is undefined while using react@16.14.0 and webpack mode
+fix: 使用 react@16.14.0 且在 webpack 模式下时报错 React is undefined
diff --git a/packages/cli/uni-builder/src/webpack/plugins/babel.ts b/packages/cli/uni-builder/src/webpack/plugins/babel.ts
@@ -1,7 +1,7 @@
 import type { BabelConfig } from '@modern-js/babel-preset';
 import { getBabelConfigForNode } from '@modern-js/babel-preset/node';
 import { getBabelConfigForWeb } from '@modern-js/babel-preset/web';
-import { applyOptionsChain, isBeyondReact17 } from '@modern-js/utils';
+import { applyOptionsChain, isSupportAutomaticJsx } from '@modern-js/utils';
 import { logger } from '@rsbuild/core';
 import type {
   NormalizedEnvironmentConfig,
@@ -25,7 +25,7 @@ import {
  * webpack mode: uni-builder:babel -> uni-builder:ts-loader -> rsbuild-webpack:swc
  */
 export const getPresetReact = (rootPath: string, isProd: boolean) => {
-  const isNewJsx = isBeyondReact17(rootPath);
+  const isNewJsx = isSupportAutomaticJsx(rootPath);
 
   const presetReactOptions = {
     development: !isProd,
diff --git a/packages/runtime/plugin-testing/src/base/config/transformer/babelTransformer.ts b/packages/runtime/plugin-testing/src/base/config/transformer/babelTransformer.ts
@@ -1,7 +1,7 @@
-import { isBeyondReact17 } from '@modern-js/utils';
+import { isSupportAutomaticJsx } from '@modern-js/utils';
 import babelJest from 'babel-jest';
 
-const isNewJsx = isBeyondReact17(process.cwd());
+const isNewJsx = isSupportAutomaticJsx(process.cwd());
 
 const babelTransformer = (babelJest.createTransformer as any)?.({
   presets: [
diff --git a/packages/toolkit/utils/src/cli/is/project.ts b/packages/toolkit/utils/src/cli/is/project.ts
@@ -79,6 +79,9 @@ export const isWebOnly = async () => {
   return Boolean(options['web-only']);
 };
 
+/**
+ * @deprecated Use {@link isSupportAutomaticJsx} to check if the project supports automatic JSX instead.
+ */
 export const isBeyondReact17 = (cwd: string) => {
   const pkgPath = pkgUp.sync({ cwd });
 
@@ -99,6 +102,26 @@ export const isBeyondReact17 = (cwd: string) => {
   return semver.satisfies(semver.minVersion(deps.react)!, '>=17.0.0');
 };
 
+export const isSupportAutomaticJsx = (cwd: string) => {
+  const pkgPath = pkgUp.sync({ cwd });
+
+  if (!pkgPath) {
+    return false;
+  }
+
+  const pkgInfo = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+  const deps = {
+    ...pkgInfo.devDependencies,
+    ...pkgInfo.dependencies,
+  };
+
+  if (typeof deps.react !== 'string') {
+    return false;
+  }
+
+  return semver.satisfies(semver.minVersion(deps.react)!, '>=16.14.0');
+};
+
 export const isReact18 = (cwd: string = process.cwd()) => {
   const pkgPath = path.join(cwd, 'package.json');
 
