Webpack解析ESM与非ESM文件不一致，Firebase依赖加载异常如何修复？

这个问题是Webpack默认的依赖入口解析优先级和Firebase多入口版本的设计不匹配导致的，可通过以下方式修复：

方案1：调整Webpack resolve.mainFields 优先级（推荐） #

Webpack解析第三方包入口时会按mainFields配置的字段顺序匹配，Firebase的所有官方包都内置了esm2017入口字段，把它放到优先级最高的位置即可全局生效。
在你的webpack配置文件中添加以下配置：

module.exports = {
  // 原有其他配置保持不变
  resolve: {
    mainFields: ['esm2017', 'browser', 'module', 'main']
  }
}

配置后所有支持esm2017入口的Firebase相关依赖都会优先加载对应版本，不会再出现通用cjs版本和es2017版本共存的问题。

方案2：配置resolve.alias强制指定入口 #

如果调整mainFields后仍有个别依赖加载异常，可以用alias直接绑定对应包的es2017入口路径：

module.exports = {
  // 原有其他配置保持不变
  resolve: {
    alias: {
      '@firebase/component': '@firebase/component/dist/index.esm2017.js',
      // 其他存在版本冲突的依赖都可以按这个格式添加
    }
  }
}

方案3：Webpack 5 额外适配配置 #

如果你使用的是Webpack 5，还可以补充配置resolve.conditionNames适配包的exports字段规则，避免新版本Firebase依赖解析异常：

module.exports = {
  // 原有其他配置保持不变
  resolve: {
    conditionNames: ['es2017', 'import', 'browser', 'require']
  }
}

配置验证方法 #

可以安装webpack-bundle-analyzer插件，打包后查看依赖树，确认@firebase/component这类冲突包仅加载了一次es2017版本，即配置生效。
该问题不属于Webpack的功能缺陷，无需提交Bug。

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