为何@babel/preset-react自动转换在Webpack环境下失效？

环境为Yarn monorepo，同时存在配置相同的babel.config.js，使用React 18.1.x版本。已有一套几乎完全相同的配置可正常运行，但当前配置却失效，已花费数小时查找差异（若真存在差异的话）。

运行时配置 #

[
  '@babel/preset-react',
  {
    runtime: 'automatic',
  },
],

精简后的Webpack完整配置 #

module.exports = env => {
  return {
    resolve,
    entry: {
      entry: './src/entry.js',
    },
    output: {
      path: path.join(__dirname, './build'),
      filename: '[name].bundle.js',
    },
    module: {
      rules: [
        {
          test: /\.(?:js|jsx)$/,
          exclude: /(node_modules)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-env',
                [
                  '@babel/preset-react',
                  {
                    runtime: 'automatic',
                  },
                ],
                '@babel/preset-typescript',
              ],
              plugins: [
                '@emotion',
                '@babel/plugin-transform-runtime',
                '@babel/plugin-transform-flow-strip-types',
                ['@babel/plugin-transform-react-jsx'],
                '@babel/plugin-proposal-object-rest-spread',
                ['@babel/plugin-proposal-optional-chaining', { loose: false }],
                '@babel/plugin-proposal-do-expressions',
                '@babel/plugin-proposal-export-namespace-from',
                '@babel/plugin-proposal-class-properties',
                '@babel/plugin-transform-classes',
              ],
              babelrc: true,
            },
          },
        },
      ],
    },
    mode: process.env.NODE_ENV,
    plugins: [
      new CleanWebpackPlugin(pathsToClean),
      new MiniCssExtractPlugin({
        filename: 'style.css',
      }),
    ],
  };
};

排查建议 #

• 关闭babelrc选项测试：当前配置中babelrc: true会让Babel优先读取项目根目录的.babelrc或babel.config.js，如果其中的React预设配置和Webpack内的冲突，会覆盖Webpack配置。可以先把babelrc设为false，看配置是否生效。
• 统一Monorepo依赖版本：Yarn Monorepo可能存在依赖版本不一致问题，执行yarn list @babel/preset-react查看所有子包的该依赖版本，确保统一；同时确认@babel/preset-react版本在^7.16.0以上，保证兼容React 18.1.x。
• 移除冲突插件：@babel/preset-react已包含JSX转换逻辑，单独配置@babel/plugin-transform-react-jsx会覆盖预设的自动运行时配置，建议删除这个插件后重新构建。
• 清理缓存：执行yarn cache clean，删除项目的node_modules和build目录，重新安装依赖并构建，排除缓存导致的配置不生效问题。

内容的提问来源于stack exchange，提问作者Slbox