为什么@babel/preset-react自动转换与Webpack结合不成功？

Question

环境是一个 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',
      }),
    ],
  };
};

Answer 1

问题是我们在插件下有

@babel/plugin-transform-react-jsx

。

如果你要在

@babel/preset-react

中使用自动转换，你必须删除

@babel/plugin-transform-react-jsx

.