fix(plugin-vue): remove react-related babel plugins (#4005)

* fix(plugin-vue): remove react-related babel plugins * chore: fix * chore: fix peer dependencies
web-infra-dev · Jun 19, 2023 · 36f5bdf · 36f5bdf
1 parent ef041c0
commit 36f5bdf
Show file tree

Hide file tree

Showing 25 changed files with 240 additions and 351 deletions.
diff --git a/.changeset/olive-wolves-love.md b/.changeset/olive-wolves-love.md
@@ -0,0 +1,11 @@
+---
+'@modern-js/builder-webpack-provider': patch
+'@modern-js/babel-preset-base': patch
+'@modern-js/babel-preset-app': patch
+'@modern-js/builder-plugin-vue': patch
+'@modern-js/server-utils': patch
+---
+
+fix(plugin-vue): remove react-related babel plugins
+
+fix(plugin-vue): 移除 react 相关的 babel 插件
diff --git a/packages/builder/builder-rspack-provider/src/plugins/css.ts b/packages/builder/builder-rspack-provider/src/plugins/css.ts
@@ -10,7 +10,7 @@ import {
   getCssModulesAutoRule,
   getPostcssConfig,
   getCssModuleLocalIdentName,
-  resolveLoader,
+  resolvePackage,
   type BundlerChain,
   type BuilderContext,
   type StyleLoaderOptions,
@@ -89,8 +89,9 @@ export async function applyBaseCSSRule({
         rule
           .use(CHAIN_ID.USE.CSS_MODULES_TS)
           .loader(
-            resolveLoader(
+            resolvePackage(
               '@modern-js/builder-shared/css-modules-typescript-loader',
+              __dirname,
             ),
           )
           .options({
@@ -101,7 +102,12 @@ export async function applyBaseCSSRule({
     } else {
       rule
         .use(CHAIN_ID.USE.IGNORE_CSS)
-        .loader(resolveLoader('@modern-js/builder-shared/ignore-css-loader'))
+        .loader(
+          resolvePackage(
+            '@modern-js/builder-shared/ignore-css-loader',
+            __dirname,
+          ),
+        )
         .end();
     }
 

diff --git a/packages/builder/builder-shared/src/utils.ts b/packages/builder/builder-shared/src/utils.ts
@@ -72,7 +72,9 @@ export function isWebTarget(target: BuilderTarget | BuilderTarget[]) {
   );
 }
 
-export function resolveLoader(loader: string) {
+export function resolvePackage(loader: string, dirname: string) {
   // Vitest do not support require.resolve to source file
-  return process.env.VITEST ? loader : require.resolve(loader);
+  return process.env.VITEST
+    ? loader
+    : require.resolve(loader, { paths: [dirname] });
 }
diff --git a/...nsform-react-remove-prop-types/index.d.ts → ...nsform-react-remove-prop-types/index.d.ts b/...nsform-react-remove-prop-types/index.d.ts → ...nsform-react-remove-prop-types/index.d.ts
diff --git a/...ransform-react-remove-prop-types/index.js → ...ransform-react-remove-prop-types/index.js b/...ransform-react-remove-prop-types/index.js → ...ransform-react-remove-prop-types/index.js
diff --git a/...transform-react-remove-prop-types/license → ...transform-react-remove-prop-types/license b/...transform-react-remove-prop-types/license → ...transform-react-remove-prop-types/license
diff --git a/...form-react-remove-prop-types/package.json → ...form-react-remove-prop-types/package.json b/...form-react-remove-prop-types/package.json → ...form-react-remove-prop-types/package.json
diff --git a/packages/builder/builder-webpack-provider/package.json b/packages/builder/builder-webpack-provider/package.json
@@ -88,6 +88,8 @@
     "test:ui": "vitest --ui"
   },
   "dependencies": {
+    "@babel/core": "^7.21.8",
+    "@babel/preset-react": "^7.18.6",
     "@modern-js/babel-preset-app": "workspace:*",
     "@modern-js/babel-preset-base": "workspace:*",
     "@modern-js/builder-shared": "workspace:*",

diff --git a/packages/builder/builder-webpack-provider/src/plugins/babel.ts b/packages/builder/builder-webpack-provider/src/plugins/babel.ts
@@ -112,6 +112,7 @@ export const builderPluginBabel = (): BuilderPlugin => ({
               userBabelConfigUtils: babelUtils,
               overrideBrowserslist: browserslist,
               importAntd: false,
+              disableReactPreset: true,
             }),
           };
 

diff --git a/packages/builder/builder-webpack-provider/src/plugins/css.ts b/packages/builder/builder-webpack-provider/src/plugins/css.ts
@@ -1,6 +1,6 @@
 import {
   CSS_REGEX,
-  resolveLoader,
+  resolvePackage,
   isUseCssExtract,
   getPostcssConfig,
   ModifyChainUtils,
@@ -93,8 +93,9 @@ export async function applyBaseCSSRule({
       rule
         .use(CHAIN_ID.USE.CSS_MODULES_TS)
         .loader(
-          resolveLoader(
+          resolvePackage(
             '@modern-js/builder-shared/css-modules-typescript-loader',
+            __dirname,
           ),
         )
         .options({
@@ -105,7 +106,12 @@ export async function applyBaseCSSRule({
   } else {
     rule
       .use(CHAIN_ID.USE.IGNORE_CSS)
-      .loader(resolveLoader('@modern-js/builder-shared/ignore-css-loader'))
+      .loader(
+        resolvePackage(
+          '@modern-js/builder-shared/ignore-css-loader',
+          __dirname,
+        ),
+      )
       .end();
   }
 

diff --git a/packages/builder/builder-webpack-provider/src/plugins/react.ts b/packages/builder/builder-webpack-provider/src/plugins/react.ts
@@ -1,10 +1,46 @@
-import type { BuilderPlugin } from '../types';
+import type { BuilderConfig, BuilderPlugin } from '../types';
 import { isUsingHMR } from '@modern-js/builder-shared';
 
 export const builderPluginReact = (): BuilderPlugin => ({
   name: 'builder-plugin-react',
 
   setup(api) {
+    api.modifyBuilderConfig(async (config, { mergeBuilderConfig }) => {
+      const { isProd, isBeyondReact17 } = await import('@modern-js/utils');
+
+      const babelConfig: BuilderConfig = {
+        tools: {
+          babel(_, { addPresets, addPlugins }) {
+            const isNewJsx = isBeyondReact17(api.context.rootPath);
+            const presetReactOptions = {
+              development: !isProd(),
+              // Will use the native built-in instead of trying to polyfill
+              useBuiltIns: true,
+              useSpread: false,
+              runtime: isNewJsx ? 'automatic' : 'classic',
+            };
+
+            addPresets([
+              [require.resolve('@babel/preset-react'), presetReactOptions],
+            ]);
+
+            if (isProd()) {
+              addPlugins([
+                [
+                  require.resolve(
+                    '../../compiled/babel-plugin-transform-react-remove-prop-types',
+                  ),
+                  { removeImport: true },
+                ],
+              ]);
+            }
+          },
+        },
+      };
+
+      return mergeBuilderConfig(babelConfig, config);
+    });
+
     api.modifyWebpackChain(async (chain, utils) => {
       const config = api.getNormalizedConfig();
 

diff --git a/packages/builder/builder-webpack-provider/src/plugins/tsLoader.ts b/packages/builder/builder-webpack-provider/src/plugins/tsLoader.ts
@@ -1,4 +1,8 @@
-import { TS_REGEX, applyScriptCondition } from '@modern-js/builder-shared';
+import {
+  TS_REGEX,
+  resolvePackage,
+  applyScriptCondition,
+} from '@modern-js/builder-shared';
 import _ from '@modern-js/utils/lodash';
 import { BuilderPlugin } from '../types';
 import { getUseBuiltIns } from './babel';
@@ -17,17 +21,14 @@ export const builderPluginTsLoader = (): BuilderPlugin => {
         const babelLoaderOptions = {
           presets: [
             [
-              // When running test, using the package name,
-              // Otherwise vitest will failed to resolve the preset
-              process.env.NODE_ENV === 'test'
-                ? '@modern-js/babel-preset-app'
-                : require.resolve('@modern-js/babel-preset-app'),
+              resolvePackage('@modern-js/babel-preset-app', __dirname),
               {
                 appDirectory: rootPath,
                 target: 'client',
                 useTsLoader: true,
                 useBuiltIns: getUseBuiltIns(config),
                 userBabelConfig: config.tools.babel,
+                disableReactPreset: true,
               },
             ],
           ],

diff --git a/packages/builder/builder-webpack-provider/tests/__snapshots__/webpackConfig.test.ts.snap b/packages/builder/builder-webpack-provider/tests/__snapshots__/webpackConfig.test.ts.snap
@@ -245,15 +245,6 @@ exports[`webpackConfig > should not have any pluginImport in Babel 1`] = `
                 "useBuiltIns": "entry",
               },
             ],
-            [
-              "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
-              {
-                "development": true,
-                "runtime": "automatic",
-                "useBuiltIns": true,
-                "useSpread": false,
-              },
-            ],
             [
               "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-typescript/lib/index.js",
               {
@@ -354,15 +345,6 @@ exports[`webpackConfig > should not have any pluginImport in Babel 1`] = `
                 "useBuiltIns": "entry",
               },
             ],
-            [
-              "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
-              {
-                "development": true,
-                "runtime": "automatic",
-                "useBuiltIns": true,
-                "useSpread": false,
-              },
-            ],
             [
               "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-typescript/lib/index.js",
               {
@@ -482,15 +464,6 @@ exports[`webpackConfig > should not set default pluginImport for Babel 1`] = `
                 "useBuiltIns": "entry",
               },
             ],
-            [
-              "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
-              {
-                "development": true,
-                "runtime": "automatic",
-                "useBuiltIns": true,
-                "useSpread": false,
-              },
-            ],
             [
               "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-typescript/lib/index.js",
               {
@@ -600,15 +573,6 @@ exports[`webpackConfig > should not set default pluginImport for Babel 1`] = `
                 "useBuiltIns": "entry",
               },
             ],
-            [
-              "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
-              {
-                "development": true,
-                "runtime": "automatic",
-                "useBuiltIns": true,
-                "useSpread": false,
-              },
-            ],
             [
               "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-typescript/lib/index.js",
               {
@@ -750,15 +714,6 @@ exports[`webpackConfig > should set proper pluginImport option in Babel 1`] = `
                 "useBuiltIns": "entry",
               },
             ],
-            [
-              "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
-              {
-                "development": true,
-                "runtime": "automatic",
-                "useBuiltIns": true,
-                "useSpread": false,
-              },
-            ],
             [
               "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-typescript/lib/index.js",
               {
@@ -867,15 +822,6 @@ exports[`webpackConfig > should set proper pluginImport option in Babel 1`] = `
                 "useBuiltIns": "entry",
               },
             ],
-            [
-              "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
-              {
-                "development": true,
-                "runtime": "automatic",
-                "useBuiltIns": true,
-                "useSpread": false,
-              },
-            ],
             [
               "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-typescript/lib/index.js",
               {