React 和 Webpack：“未捕获的 ReferenceError：需要未定义”

问题描述

我正在尝试将我的 Webpack (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)

我无法弄清楚导致此错误的原因。 Webpack 设置中有很多活动部分，但我猜测 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…
  };
};

解决方法

这是否回答了您的问题：How can I use ES6 in webpack.config.js?？

长话短说，webpack.config.js 是用 Node 解析的，它默认不支持 es6。不过，您可以将配置文件重命名为 webpack.config.babel.js。

话虽如此，在这样的文件中使用导入语法并不重要，require 对我来说看起来不错。