fix(uni-builder): apply babel preset-react when using ts-loader (#5363)

web-infra-dev · Feb 2, 2024 · eec5792 · eec5792
1 parent 44cda24
commit eec5792
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 43 deletions.
diff --git a/.changeset/eleven-pants-hope.md b/.changeset/eleven-pants-hope.md
@@ -0,0 +1,7 @@
+---
+'@modern-js/uni-builder': patch
+---
+
+fix(uni-builder): apply babel preset-react when using ts-loader
+
+fix(uni-builder): 使用 ts-loader 时开启 babel preset-react
diff --git a/packages/builder/uni-builder/src/webpack/plugins/babel.ts b/packages/builder/uni-builder/src/webpack/plugins/babel.ts
@@ -2,7 +2,7 @@ import lodash from 'lodash';
 import { getBabelConfigForWeb } from '@rsbuild/babel-preset/web';
 import { getBabelConfigForNode } from '@rsbuild/babel-preset/node';
 import type { BabelConfig } from '@rsbuild/babel-preset';
-import { isBeyondReact17 } from '@rsbuild/plugin-react';
+import { isBeyondReact17 } from '@modern-js/utils';
 import {
   SCRIPT_REGEX,
   mergeChainedOptions,
@@ -18,6 +18,20 @@ import {
   type PluginBabelOptions,
 } from '@rsbuild/plugin-babel';
 
+export const getPresetReact = (rootPath: string, isProd: boolean) => {
+  const isNewJsx = isBeyondReact17(rootPath);
+
+  const presetReactOptions = {
+    development: !isProd,
+    // Will use the native built-in instead of trying to polyfill
+    useBuiltIns: true,
+    useSpread: false,
+    runtime: isNewJsx ? 'automatic' : 'classic',
+  };
+
+  return [require.resolve('@babel/preset-react'), presetReactOptions];
+};
+
 export const pluginBabel = (options?: PluginBabelOptions): RsbuildPlugin => ({
   name: 'uni-builder:babel',
   setup(api) {
@@ -32,7 +46,6 @@ export const pluginBabel = (options?: PluginBabelOptions): RsbuildPlugin => ({
           config,
           target,
         );
-        const isNewJsx = await isBeyondReact17(api.context.rootPath);
 
         const getBabelOptions = (config: NormalizedConfig) => {
           // Create babel util function about include/exclude
@@ -84,18 +97,9 @@ export const pluginBabel = (options?: PluginBabelOptions): RsbuildPlugin => ({
             config.performance.transformLodash,
           );
 
-          const presetReactOptions = {
-            development: !isProd,
-            // Will use the native built-in instead of trying to polyfill
-            useBuiltIns: true,
-            useSpread: false,
-            runtime: isNewJsx ? 'automatic' : 'classic',
-          };
-
-          baseBabelConfig.presets?.push([
-            require.resolve('@babel/preset-react'),
-            presetReactOptions,
-          ]);
+          baseBabelConfig.presets?.push(
+            getPresetReact(api.context.rootPath, isProd),
+          );
 
           if (isProd) {
             baseBabelConfig.plugins?.push([

diff --git a/packages/builder/uni-builder/src/webpack/plugins/tsLoader.ts b/packages/builder/uni-builder/src/webpack/plugins/tsLoader.ts
@@ -16,6 +16,7 @@ import {
 import { getBabelConfigForWeb } from '@rsbuild/babel-preset/web';
 import type { RsbuildPlugin } from '@rsbuild/core';
 import type { Options as RawTSLoaderOptions } from 'ts-loader';
+import { getPresetReact } from './babel';
 
 export type TSLoaderOptions = Partial<RawTSLoaderOptions>;
 
@@ -47,7 +48,7 @@ export const pluginTsLoader = (
     post: ['uni-builder:react'],
 
     setup(api) {
-      api.modifyBundlerChain(async (chain, { target, CHAIN_ID }) => {
+      api.modifyBundlerChain(async (chain, { isProd, target, CHAIN_ID }) => {
         const config = api.getNormalizedConfig();
         const { rootPath } = api.context;
         const browserslist = await getBrowserslistWithDefault(
@@ -63,6 +64,10 @@ export const pluginTsLoader = (
           },
         });
 
+        baseBabelConfig.presets?.push(
+          getPresetReact(api.context.rootPath, isProd),
+        );
+
         const babelUtils = getBabelUtils(baseBabelConfig);
 
         const babelLoaderOptions = mergeChainedOptions({

diff --git a/packages/builder/uni-builder/tests/__snapshots__/babel.test.ts.snap b/packages/builder/uni-builder/tests/__snapshots__/babel.test.ts.snap
@@ -340,7 +340,7 @@ exports[`plugin-babel > should add core-js-entry when output.polyfill is entry 1
               "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
               {
                 "development": true,
-                "runtime": "classic",
+                "runtime": "automatic",
                 "useBuiltIns": true,
                 "useSpread": false,
               },
@@ -466,7 +466,7 @@ exports[`plugin-babel > should adjust browserslist when target is node 1`] = `
               "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
               {
                 "development": true,
-                "runtime": "classic",
+                "runtime": "automatic",
                 "useBuiltIns": true,
                 "useSpread": false,
               },
@@ -616,7 +616,7 @@ exports[`plugin-babel > should apply exclude condition when using source.exclude
               "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
               {
                 "development": true,
-                "runtime": "classic",
+                "runtime": "automatic",
                 "useBuiltIns": true,
                 "useSpread": false,
               },
@@ -763,7 +763,7 @@ exports[`plugin-babel > should not add core-js-entry when output.polyfill is usa
               "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
               {
                 "development": true,
-                "runtime": "classic",
+                "runtime": "automatic",
                 "useBuiltIns": true,
                 "useSpread": false,
               },
@@ -876,7 +876,7 @@ exports[`plugin-babel > should not have any pluginImport in Babel 1`] = `
               "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
               {
                 "development": true,
-                "runtime": "classic",
+                "runtime": "automatic",
                 "useBuiltIns": true,
                 "useSpread": false,
               },
@@ -972,7 +972,7 @@ exports[`plugin-babel > should not have any pluginImport in Babel 1`] = `
               "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
               {
                 "development": true,
-                "runtime": "classic",
+                "runtime": "automatic",
                 "useBuiltIns": true,
                 "useSpread": false,
               },
@@ -1113,7 +1113,7 @@ exports[`plugin-babel > should not set default pluginImport for Babel 1`] = `
               "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
               {
                 "development": true,
-                "runtime": "classic",
+                "runtime": "automatic",
                 "useBuiltIns": true,
                 "useSpread": false,
               },
@@ -1237,7 +1237,7 @@ exports[`plugin-babel > should not set default pluginImport for Babel 1`] = `
               "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
               {
                 "development": true,
-                "runtime": "classic",
+                "runtime": "automatic",
                 "useBuiltIns": true,
                 "useSpread": false,
               },
@@ -1382,7 +1382,7 @@ exports[`plugin-babel > should override targets of babel-preset-env when using o
               "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
               {
                 "development": true,
-                "runtime": "classic",
+                "runtime": "automatic",
                 "useBuiltIns": true,
                 "useSpread": false,
               },
@@ -1529,7 +1529,7 @@ exports[`plugin-babel > should set babel-loader 1`] = `
               "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
               {
                 "development": true,
-                "runtime": "classic",
+                "runtime": "automatic",
                 "useBuiltIns": true,
                 "useSpread": false,
               },
@@ -1680,7 +1680,7 @@ exports[`plugin-babel > should set include/exclude 1`] = `
               "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
               {
                 "development": true,
-                "runtime": "classic",
+                "runtime": "automatic",
                 "useBuiltIns": true,
                 "useSpread": false,
               },
@@ -1829,7 +1829,7 @@ exports[`plugin-babel > should set proper pluginImport option in Babel 1`] = `
               "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
               {
                 "development": true,
-                "runtime": "classic",
+                "runtime": "automatic",
                 "useBuiltIns": true,
                 "useSpread": false,
               },
@@ -1961,7 +1961,7 @@ exports[`plugin-babel > should set proper pluginImport option in Babel 1`] = `
               "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
               {
                 "development": true,
-                "runtime": "classic",
+                "runtime": "automatic",
                 "useBuiltIns": true,
                 "useSpread": false,
               },

diff --git a/packages/builder/uni-builder/tests/__snapshots__/default.test.ts.snap b/packages/builder/uni-builder/tests/__snapshots__/default.test.ts.snap
@@ -2496,7 +2496,7 @@ exports[`uni-builder webpack > should generator webpack config correctly 1`] = `
                   "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
                   {
                     "development": true,
-                    "runtime": "classic",
+                    "runtime": "automatic",
                     "useBuiltIns": true,
                     "useSpread": false,
                   },
@@ -2620,7 +2620,7 @@ exports[`uni-builder webpack > should generator webpack config correctly 1`] = `
                   "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
                   {
                     "development": true,
-                    "runtime": "classic",
+                    "runtime": "automatic",
                     "useBuiltIns": true,
                     "useSpread": false,
                   },
@@ -2783,7 +2783,7 @@ exports[`uni-builder webpack > should generator webpack config correctly 1`] = `
                       "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
                       {
                         "development": true,
-                        "runtime": "classic",
+                        "runtime": "automatic",
                         "useBuiltIns": true,
                         "useSpread": false,
                       },
@@ -3518,7 +3518,7 @@ exports[`uni-builder webpack > should generator webpack config correctly when pr
                   "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
                   {
                     "development": false,
-                    "runtime": "classic",
+                    "runtime": "automatic",
                     "useBuiltIns": true,
                     "useSpread": false,
                   },
@@ -3648,7 +3648,7 @@ exports[`uni-builder webpack > should generator webpack config correctly when pr
                   "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
                   {
                     "development": false,
-                    "runtime": "classic",
+                    "runtime": "automatic",
                     "useBuiltIns": true,
                     "useSpread": false,
                   },
@@ -3826,7 +3826,7 @@ exports[`uni-builder webpack > should generator webpack config correctly when pr
                       "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
                       {
                         "development": false,
-                        "runtime": "classic",
+                        "runtime": "automatic",
                         "useBuiltIns": true,
                         "useSpread": false,
                       },

diff --git a/packages/builder/uni-builder/tests/__snapshots__/react.test.ts.snap b/packages/builder/uni-builder/tests/__snapshots__/react.test.ts.snap
@@ -134,7 +134,7 @@ exports[`plugins/react > should work with babel-loader 1`] = `
               "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
               {
                 "development": true,
-                "runtime": "classic",
+                "runtime": "automatic",
                 "useBuiltIns": true,
                 "useSpread": false,
               },

diff --git a/packages/builder/uni-builder/tests/__snapshots__/styledComponents.test.ts.snap b/packages/builder/uni-builder/tests/__snapshots__/styledComponents.test.ts.snap
@@ -113,7 +113,7 @@ exports[`plugins/styled-components > should enable ssr when target contain node
               "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
               {
                 "development": true,
-                "runtime": "classic",
+                "runtime": "automatic",
                 "useBuiltIns": true,
                 "useSpread": false,
               },
@@ -260,7 +260,7 @@ exports[`plugins/styled-components > should enable ssr when target contain node
               "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
               {
                 "development": true,
-                "runtime": "classic",
+                "runtime": "automatic",
                 "useBuiltIns": true,
                 "useSpread": false,
               },
@@ -407,7 +407,7 @@ exports[`plugins/styled-components > should works in webpack babel mode 1`] = `
               "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
               {
                 "development": true,
-                "runtime": "classic",
+                "runtime": "automatic",
                 "useBuiltIns": true,
                 "useSpread": false,
               },

diff --git a/packages/builder/uni-builder/tests/__snapshots__/tsLoader.test.ts.snap b/packages/builder/uni-builder/tests/__snapshots__/tsLoader.test.ts.snap
@@ -78,6 +78,15 @@ exports[`plugin-ts-loader > should set include/exclude 1`] = `
                 "optimizeConstEnums": true,
               },
             ],
+            [
+              "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
+              {
+                "development": true,
+                "runtime": "automatic",
+                "useBuiltIns": true,
+                "useSpread": false,
+              },
+            ],
           ],
         },
       },
@@ -171,6 +180,15 @@ exports[`plugin-ts-loader > should set ts-loader 1`] = `
                 "optimizeConstEnums": true,
               },
             ],
+            [
+              "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
+              {
+                "development": true,
+                "runtime": "automatic",
+                "useBuiltIns": true,
+                "useSpread": false,
+              },
+            ],
           ],
         },
       },

diff --git a/tests/integration/source-code-build/app-ts-loader/modern.config.ts b/tests/integration/source-code-build/app-ts-loader/modern.config.ts
@@ -9,10 +9,8 @@ export default defineConfig({
   },
   plugins: [
     appTools({
-      bundler:
-        process.env.PROVIDE_TYPE === 'rspack'
-          ? 'experimental-rspack'
-          : 'webpack',
+      // ts-loader only supports webpack
+      bundler: 'webpack',
     }),
   ],
   tools: {

diff --git a/tests/integration/source-code-build/app-ts-loader/tsconfig.json b/tests/integration/source-code-build/app-ts-loader/tsconfig.json
@@ -2,7 +2,7 @@
   "extends": "@modern-js/tsconfig/base",
   "compilerOptions": {
     "declaration": false,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "baseUrl": "./",
     "paths": {
       "@/*": ["./src/*"],