Firebase 9升级后'initializeApp'未从'firebase/app'导出报错如何解决？

1. 优先排查包安装异常 #

• 先卸载现有firebase包：

npm uninstall firebase
# 或yarn
yarn remove firebase

• 清除包管理器缓存：

npm cache clean --force
# 或yarn
yarn cache clean

• 重新安装最新稳定版firebase：

npm install firebase@latest
# 或yarn
yarn add firebase@latest

2. 修正compat库的导入语法 #

如果你需要兼容Firebase 8的旧代码逻辑，要注意compat库不支持模块化具名导入，必须使用命名空间导入方式，正确写法如下：

import firebase from 'firebase/compat/app'
// 导入对应子产品的compat包
import 'firebase/compat/database'
import 'firebase/compat/auth'

// 初始化及调用示例
const app = firebase.initializeApp(你的firebase配置对象)
const db = firebase.database()
const auth = firebase.auth()
// 原有8版本的api都可以直接通过firebase命名空间调用

如果你不需要兼容旧代码，直接使用Firebase 9的模块化API，删除所有带compat的导入语句，使用你最开始的导入写法即可。

3. 清除打包工具缓存 #

如果执行完上述步骤仍有报错，大概率是开发工具的缓存导致：

• 若使用Vite，删除node_modules/.vite目录后重启开发服务
• 若使用Webpack/ReactCreateApp/VueCLI，删除node_modules/.cache目录后重启开发服务
• 极端情况可直接删除整个node_modules目录、package-lock.json或yarn.lock文件，再重新执行安装命令

4. 检查路径配置 #

如果你的项目配置了tsconfig.json/jsconfig.json的paths别名，确认没有把firebase指向非官方包的自定义路径。

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