React安装firebase后报Can't resolve 'firebase'错误怎么解决？

• 核心原因：当前通过npm i firebase默认安装的是9.x及以上版本的Firebase，该版本起官方废弃了旧的命名空间式导入规则，移除了import firebase from 'firebase'对应的全局默认导出，所以编译时会提示找不到firebase模块。
• 次要原因：安装依赖时出现网络波动、权限错误导致firebase没有实际安装成功，可打开项目根目录的package.json文件，检查dependencies字段下是否存在firebase条目，不存在则为安装失败。
• 额外代码错误：你当前的配置代码中定义的配置变量名为firebaseConfig，但初始化时传入的是未定义的config变量，后续修复模块问题后也会触发变量未定义报错。

方案一：使用新版本模块化语法（推荐） #

直接适配Firebase 9+的按需导入规则，修改firebase.js代码如下：

// 导入核心初始化方法
import { initializeApp } from "firebase/app";
// 需要使用其他服务时按需导入，示例：
// import { getAuth } from "firebase/auth"; // 认证服务
// import { getFirestore } from "firebase/firestore"; // 云数据库服务

const firebaseConfig = {
  apiKey: "******",
  authDomain: "****",
  projectId: "***",
  storageBucket: "*****",
  messagingSenderId: "****",
  appId: "****"
};

// 初始化firebase
const app = initializeApp(firebaseConfig);
// 初始化服务后导出即可使用，示例：
// export const auth = getAuth(app);
// export const db = getFirestore(app);

export default app;

方案二：降级到8.x版本沿用旧语法 #

如果不想修改现有项目的旧版Firebase写法，可以卸载当前版本，安装8.x稳定版：

1. 执行卸载命令：npm uninstall firebase
2. 执行安装指定版本命令：npm i firebase@8.10.0
3. 修正firebase.js中的初始化代码参数，修改为：

firebase.initializeApp(firebaseConfig);

异常排查 #

如果上述操作完成后仍报错，执行以下操作重置依赖：

• 删除项目根目录的node_modules文件夹和package-lock.json文件
• 重新执行npm install安装所有依赖
• 重启本地开发服务即可

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