如何修复 Webpack 5 中的 Babel/runtime/helper 问题？

Question

我想升级到 webpack 5。我已经按照官方指南升级了所有关键库（react17、babel、loaders 等）。启动应用程序时，它崩溃并出现 23 个错误。其中 21 个来自 @babel/runtime/helpers.

一个典型的错误如下所示：

ERROR in ../../node_modules/@babel/runtime/helpers/esm/createSuper.js 1:0-46 Module not found: Error: Can't resolve './getPrototypeOf' in '/Users/myName/Desktop/myapp/node_modules/@babel/runtime/helpers/esm'

另外两个错误是：

Module not found: Error: Can't resolve 'url-loader' ERROR in FaviconsWebpackPlugin - This FaviconsWebpackPlugin version is not compatible with your current HtmlWebpackPlugin version. Please upgrade to HtmlWebpackPlugin >= 5 OR downgrade to FaviconsWebpackPlugin 2.x

注意：我的html-webpack-plugin版本是5以上，favicons-webpack-plugin也是最新版本...

无论如何，这是我的 webpack 文件：

const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const webpack = require("webpack");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const getKonf = require("./konf");
const getWebpackServerOptions = require("./server");

function buildWebpackConfiguration() {
  const konfiguration = getKonf("development"); // returns a large json with proxies, token, etc.
  const rootPath = path.resolve(__dirname, "../../../");
  return {
    devtool: "eval-source-map",
    mode: "development",
    node: {
      global: false,
      __filename: false,
      __dirname: false,
    },
    resolve: {
      extensions: [".json", ".jsx", ".js", ".tsx", ".ts"],
      alias: {
        "@componens": "./components",
        "react-dom": "@hot-loader/react-dom",
      },
    },
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules\/(?!(redux-logger|strict-uri-encode|query-string)\/).*/,
          use: [
            {
              loader: "babel-loader",
              options: {
                configFile: path.resolve(rootPath, "./babel.config.js"),
              },
            },
            "react-hot-loader/webpack",
          ],
        },
        {
          test: /\.html$/,
          use: ["html-loader"],
        },
        {
          test: /\.less$/,
          exclude: /\.m\.less$/,
          use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
        },
        {
          test: /\.(eot|gif|jpg|png|svg|ttf|woff)$/,
          exclude: [
            path.resolve(rootPath, "./assets/svg"),
            path.resolve(rootPath, "./icon/glyphs"),
            path.resolve(rootPath, "./search/assets"),
          ],
          use: "url-loader?limit=1024",
        },
        {
          test: /\.m\.less$/,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: "css-loader",
              options: {
                modules: {
                  localIdentName: "[local]___[hash:base64:5]",
                },
              },
            },
            "less-loader",
          ],
        },
        {
          test: /\.svg$/,
          use: {
            loader:
              "svg-inline-loader?{'removeTags': true, 'removingTags': ['title', 'desc']",
          },
        },
        {
          test: /\.tsx?$/,
          use: [{ loader: "ts-loader", options: { transpileOnly: true } }],
          exclude: /node_modules/,
        },
        {
          include: /assets\/sw/,
          test: /\.js$/,
          loader: "file-loader",
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        title: "My app",
        template: path.resolve(__dirname, "./template/index.ejs"),
        minify: true,
        hash: true,
        scripts: [],
        styles: [],
      }),
      new webpack.DefinePlugin({
        "process.env.NODE_ENV": JSON.stringify("development"),
        "process.env.MOCK_REQUESTS": JSON.stringify(
          process.env.MOCK_REQUESTS || "0"
        ),
        KONF: JSON.stringify(konfiguration),
      }),
      new FaviconsWebpackPlugin({
        logo: path.resolve(rootPath, "./assets/logo.svg"),
        inject: true,
        title: "My App",
      }),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.ContextReplacementPlugin(/moment[/\]locale$/, /de|en|fr|zh/),
      new MiniCssExtractPlugin({
        filename: "[name].[contenthash].css",
        chunkFilename: "[id].[contenthash].css",
      }),
      new BundleAnalyzerPlugin(),
    ],
    optimization: {
      minimize: true,
      minimizer: [new OptimizeCSSAssetsPlugin({}), new TerserPlugin()],
      moduleIds: "deterministic",
      splitChunks: {
        chunks: "all",
        cacheGroups: {
          defaultVendors: {
            test: /[\/]node_modules[\/]/,
            name: "node_vendors",
            chunks: "all",
          },
        },
      },
    },
    devServer: getWebpackServerOptions(konfiguration),
  };
}

module.exports = buildWebpackConfiguration;

这是我的 Babel 配置文件：

module.exports = {
  ignore: ["node_modules"],
  babelrcRoots: [".", "./packages/*", "./app/*"],
  presets: [
    "@babel/preset-typescript",
    [
      "@babel/preset-env",
      {
        targets: {
          browsers: ["defaults"],
        },
      },
    ],
    "@babel/preset-react",
  ],
  env: {
    test: {
      plugins: [
        [
          "babel-plugin-react-css-modules",
          {
            generateScopedName: "[local]",
            filetypes: {
              ".less": {
                syntax: "postcss-less",
              },
            },
          },
        ],
      ],
    },
    development: {
      plugins: [
        [
          "babel-plugin-react-css-modules",
          {
            webpackHotModuleReloading: true,
            generateScopedName: "[local]___[hash:base64:5]",
            handleMissingStyleName: "warn",
            filetypes: {
              ".less": {
                syntax: "postcss-less",
              },
            },
          },
        ],
      ],
    },
    production: {
      plugins: [
        [
          "babel-plugin-react-css-modules",
          {
            webpackHotModuleReloading: true,
            generateScopedName: "[hash:base64]",
            filetypes: {
              ".less": {
                syntax: "postcss-less",
              },
            },
          },
        ],
      ],
    },
  },
  plugins: [
    "@babel/plugin-transform-object-assign",
    "@babel/plugin-transform-regenerator",
    "@babel/plugin-transform-runtime",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-transform-modules-commonjs",
    ["@babel/plugin-proposal-class-properties", { loose: true }],
    [
      "module-resolver",
      {
        cwd: "babelrc",
        root: "./",
        alias: {
          "@components": "./components",
          "@assets": "./assets",
        },
      },
    ],
  ],
};

如何解决这个问题？

Answer 1

重新发布到https://github.com/babel/babel/issues/8462，运行时问题可以通过将@babel/runtime pkg 版本升级到7.12.0

以上来解决

如何修复 Webpack 5 中的 Babel/runtime/helper 问题？

How to fix a Babel/runtime/helper issue in Webpack 5?

reactjs

webpack

babeljs