使用babel+core-js+webpack兼容Chrome54出现export未找到报错如何修复

问题根因 #

Chrome 61才开始原生支持完整ES模块规范，当你将target设置为Chrome 54时，@babel/preset-env会自动把ES模块的import/export语法转换为CommonJS的require/module.exports格式。项目中依赖的部分第三方库（如strip-ansi）是纯ES模块格式，core-js的polyfill模块则是CommonJS格式，两种模块系统的导出导入规则不兼容，就会抛出default导出不存在的报错。Chrome 74原生支持ES模块所有特性，不需要转换模块格式，因此不会触发该问题。

修复步骤 #

1. 优先修改babel.config.js配置，新增modules: false参数，让babel不要转换ES模块语法，交给webpack统一处理模块互操作逻辑，同时不影响core-js polyfill的自动注入。同时将corejs版本指定为完整的小版本号，避免版本兼容问题：

module.exports = {
    presets: [
        ["@babel/preset-env", {
            "useBuiltIns": "usage",
            "corejs": "3.30", // 填写你实际安装的core-js 3.x完整版本号
            "modules": false, // 新增这一行，禁止babel转换ES模块语法
            "targets": {
                "chrome": "54"
            },
            "exclude": ["@babel/plugin-transform-regenerator", "@babel/plugin-transform-arrow-functions"]
        }],
    ]
}

2. 检查webpack配置中的babel-loader规则，确保排除core-js目录，避免重复转译polyfill导致异常：

// webpack.config.js中module.rules的babel-loader配置示例
{
  test: /\.js$/,
  exclude: /node_modules\/core-js/,
  use: 'babel-loader'
}

3. 如果上述配置后仍有报错，可在@babel/preset-env配置中新增importInterop: "node"参数，让babel遵循Node.js的ES模块/CommonJS互操作规则，自动适配没有default导出的CommonJS模块：

["@babel/preset-env", {
  // 其余原有配置不变
  "importInterop": "node"
}]

按照上述配置修改后，既可以保留core-js的polyfill注入能力兼容Chrome 54，也不会再出现模块导出不兼容的报错。

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