Webpack 5 无法将Node模块ESM格式的MUI包转换为CommonJS问题求解

云上老周

2026-10-4

问题根因

你当前配置中使用的webpack-node-externals默认会将所有node_modules下的依赖标记为外部依赖，不会经过Webpack编译流程，而是在Node运行时直接通过require加载。MUI v5默认分发ESM格式产物，Node.js加载CommonJS模块时默认不识别ESM的export语法，因此触发语法错误。

解决方案

核心思路是让MUI相关包经过Webpack编译，将ESM转换为CommonJS格式，推荐以下配置修改：

调整nodeExternals配置，将MUI相关包排除出外部依赖列表
修改Babel规则，允许处理node_modules下的MUI源码
补充@babel/preset-env适配Node运行环境，保证语法转换兼容性

修改后的完整配置

// 首先安装缺失依赖：npm install @babel/preset-env -D
const server = {
  target: "node",
  externalsPresets: { node: true },
  module: {
    rules: [
      {
        test: /\.js$/,
        type: "javascript/auto",
        // 仅排除除@mui之外的node_modules内容
        exclude: /node_modules\/(?!@mui)/,
        use: {
          loader: "babel-loader",
          options: {
            babelrc: false,
            configFile: false,
            // 新增@babel/preset-env，指定node目标环境
            presets: [
              ["@babel/preset-env", { targets: { node: "current" } }],
              "@babel/preset-react"
            ],
          },
        },
      },
    ],
  },
  output: {
    filename: "[name].cjs",
    library: {
      type: "commonjs2",
    },
  },
  // 配置allowlist，让@mui相关包不被标记为外部依赖，交由webpack处理
  externals: [nodeExternals({ allowlist: [/^@mui\//] })],
};