ES模块环境中require未定义报错：Babel/Webpack配置排查求助

你的核心矛盾是：项目通过package.json的"type": "module"启用了ES模块规范，但Webpack打包后的服务器端产物中，__webpack_modules__仍在使用CommonJS的require语法，导致Node执行ES模块时抛出ReferenceError。调整@babel/plugin-transform-modules-commonjs无效，是因为这个插件的作用是把ES模块转成CommonJS，反而和你项目的ES模块设定冲突，且Webpack的模块处理逻辑优先级高于Babel的模块转换。

以下是针对性的修复步骤：

• 强制Webpack输出ES模块
  Webpack 5+支持直接输出ES模块产物，只需在服务器端的Webpack配置中添加：

  module.exports = {
    // 其他配置...
    output: {
      filename: 'server.js',
      path: path.resolve(__dirname, 'ui/dist'),
      module: true, // 标记输出为ES模块
    },
    experiments: {
      outputModule: true, // 启用ES模块输出的实验特性（部分场景需要）
    }
  };
  

  这样Webpack会自动将内部的require调用替换为ES模块兼容的导入逻辑，避免和项目的"type": "module"冲突。

• 修正Babel的模块转换配置
  既然最终要输出ES模块，就不需要Babel把源码转成CommonJS，修改你的Babel配置（比如babel.config.json）：

  {
    "presets": [
      ["@babel/preset-env", {
        "modules": false // 禁用Babel的模块转换，让Webpack自行处理
      }]
    ]
  }
  

  之前启用的@babel/plugin-transform-modules-commonjs要直接移除，它会破坏ES模块的结构。

• 调整入口文件的模块类型兼容
  如果暂时无法调整Webpack配置，可以给打包后的服务器入口文件加.cjs后缀（比如把server改成server.cjs），Node会自动将.cjs文件识别为CommonJS模块，即使全局package.json设了"type": "module"。运行时执行node ui/dist/server.cjs即可。

• 检查Webpack loader的作用范围
  确保服务器端的Webpack配置中，babel-loader正确处理了所有服务器端源码，没有遗漏或错误应用客户端的模块规则（比如客户端可能会用babel-plugin-transform-runtime等插件，服务器端需要单独配置）。

1. 清理旧的构建产物：rm -rf ui/dist
2. 重新执行构建命令
3. 运行node ui/dist/server验证是否解决报错

内容的提问来源于stack exchange，提问作者Exter