我正试图重写我的网页包（5.42.0） webpack.config.js 从使用require（）（commonjs）到使用import from（esm）。但每当我尝试加载我的页面时，我都会得到：

Uncaught ReferenceError: require is not defined
    at Module../some/path/file.js (login.bundle.js:10731)
    at Module.options.factory (react refresh:6)
    at __webpack_require__ (bootstrap:24)
    at fn (hot module replacement:61)
    at Module../some/path/util.js (login.bundle.js:10564)
    at Module.options.factory (react refresh:6)
    at __webpack_require__ (bootstrap:24)
    at fn (hot module replacement:61)
    at Module../some/path/module/Module.jsx (OtherFile.jsx:37)
    at Module.options.factory (react refresh:6)

我不知道是什么导致了这个错误。网页包设置中有很多活动部件，但我猜原因是什么 require 是否因为babel配置问题而未添加到捆绑包？
我正在使用热模块替换、各种插件（terser等）。摘自 package.json 及 webpack.config.js 添加到下面。我认为所有相关线路都包括在内：

// package.json excerpt:
{
  "type": "module",
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
}

// webpack.config.js excerpt:
import path from 'path';
import webpack from 'webpack';
import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
import TerserPlugin from 'terser-webpack-plugin';

const config = () => {
  return {
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          loader: 'babel-loader',
          options: {
            presets: ['@babel/env', '@babel/react'],
            plugins: ['react-refresh/babel'],
          },
          resolve: {
            fullySpecified: false,
          }
        },
      ],
    },
    entry: {
      main: [
        `webpack-dev-server/client?http://localhost:3500/`,
        './app/App.jsx',
      ],
    },
    output: {
      filename: '[name]/[name].bundle.js',
      path: path.resolve(__dirname, 'backend/path/bundles'),
      publicPath: 'http://localhost:3500/',
    },
    // …etc…
  };
};