Webpack5+React项目替换require为import导入报错如何解决

出现该错误的核心原因是项目中存在ES模块（import/export）与CommonJS（module.exports/exports）规范混用的情况，Webpack识别为ESM规范的模块不允许使用CommonJS导出语法，可按以下维度逐一排查：

1. 项目基础规范配置 #

• 检查根目录package.json的type字段：若配置了"type": "module"，项目全局.js文件会被默认识别为ES模块，禁止使用require、module.exports、exports等CommonJS语法。若无需全量启用ESM，可删除该配置；若需保留，可将使用CommonJS语法的文件后缀改为.cjs。
• 检查报错文件./src/component/App.js：确认替换require为import后，文件内是否仍保留module.exports = xxx或exports.xxx = xxx写法，ESM规范下需改为export default xxx默认导出或export const xxx = xxx具名导出。

2. Webpack 配置项检查 #

• 检查.js文件编译规则：确认babel-loader的@babel/preset-env预设是否配置了modules: false，该参数会保留ES模块语法交给Webpack处理，避免Babel自动转换为CommonJS导致规范冲突，参考配置如下：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
            ['@babel/preset-env', { modules: false }],
            '@babel/preset-react'
          ]
        }
      }
    }
  ]
}

• 检查output配置：若配置了output.module: true，Webpack会输出ES模块格式的产物，要求所有业务代码和依赖都遵循ESM规范，需确认是否有不符合要求的CommonJS语法残留。
• 检查实验性配置：若开启了experiments.outputModule配置，也会强制输出ESM规范产物，需和代码的模块规范保持匹配。

3. 第三方依赖兼容性检查 #

• 确认@material-ui/core版本：低版本Material UI可能存在ESM导出不规范的问题，若使用v4及以下版本可升级到对应大版本的最新修复版，也可在Webpack resolve配置中调整加载优先级，优先加载CommonJS版本：

resolve: {
  mainFields: ['main', 'module']
}

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