使用Webpack导入firebase/app模块报错：Default condition should be last one

使用Webpack和Firebase时，执行import { initializeApp } from "firebase/app";反复出现错误：Module not found: Error: Default condition should be last one。已通过npm i firebase在当前目录安装Firebase，多次重装仍未解决。项目相关信息如下：

文件结构 #

index.html 代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WElcome</title>
    <script src="./main.js"></script>
</head>
<body>
    Welcome
</body>
</html>

index.js 代码 #

import { initializeApp } from "firebase/app";

package.json 代码 #

{
  "name": "dark",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  },
  "dependencies": {
    "firebase": "^9.17.0"
  }
}

这个错误的根源是Webpack 5.75.0对package.json里exports字段的条件顺序有严格校验，要求default条件必须排在最后，但Firebase 9.17.0的包配置不符合这个要求。可以通过两种方式解决：

• 升级Webpack版本
  把Webpack升级到5.76.0及以上，该版本已经修复了这个校验问题。执行命令：

  npm install webpack@^5.76.0 webpack-cli@latest --save-dev
  

• 降级Firebase版本
  若不想升级Webpack，可将Firebase降级到9.16.0，这个版本的exports配置能兼容Webpack 5.75.0。执行命令：

  npm install firebase@^9.16.0 --save
  

另外补充：你的index.html中引用的main.js是Webpack打包产物，要确保执行npm run build后该文件存在于对应路径。如果Webpack默认输出到dist目录，需要把script的src改成./dist/main.js。

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