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

Question

I want to upgrade to webpack 5. I've followed the official guide, upgraded all critical libraries (react17, babel, loaders, etc.). When launching the app, it crashes with 23 errors. 21 of them come from @babel/runtime/helpers.

A typical error looks like this:

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'

The two other errors are:

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

Note: My html-webpack-plugin version is above 5 and favicons-webpack-plugin is the latest version as well...

Anyway, here is my webpack file:

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;

Here is my Babel config file:

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",
        },
      },
    ],
  ],
};

How to fix this?

Answer 1

releted to https://github.com/babel/babel/issues/8462, runtime issues can be solved by upgrading the @babel/runtime pkg version above 7.12.0