React项目使用Firestore报错找不到firebase模块问题求助

问题排查及解决方法 #

Module not found: Can't resolve 'firebase' in '/Users/luisgaspar/Desktop/Coding/React-Learning/chat-app-1/src'

• 版本兼容问题（最高发）
  Firebase v9及以上版本默认使用模块化API，不再支持import firebase from "firebase"的旧式全局导入写法。
  先执行npm list firebase查看本地安装的版本号：
  • 若版本≥9.0.0，可二选一解决：
    1. 改用官方推荐的模块化导入写法：

    // 导入基础初始化方法
    import { initializeApp } from "firebase/app";
    // 按需导入对应业务模块，示例为认证、云firestore数据库
    import { getAuth } from "firebase/auth";
    import { getFirestore } from "firebase/firestore";
    
    const firebaseConfig = {
      // 替换为你的Firebase项目配置
    };
    
    // 初始化应用
    const app = initializeApp(firebaseConfig);
    // 初始化业务服务
    const auth = getAuth(app);
    const db = getFirestore(app);
    

    2. 兼容旧代码可使用compat兼容包：

    import firebase from "firebase/compat/app";
    // 对应业务模块也需要导入compat版本
    import "firebase/compat/auth";
    import "firebase/compat/firestore";
    
    firebase.initializeApp(firebaseConfig);
    

• 依赖安装异常排查
  如果确认Firebase版本低于9.0.0仍报错，按以下步骤操作：
  1. 确认安装命令执行路径正确：执行npm install的路径必须是项目根目录（和package.json文件同层级），不能在src等子目录下执行安装
  2. 重装依赖：删除项目根目录下的node_modules文件夹和package-lock.json文件，先执行npm install安装全量依赖，再执行npm install firebase --save单独安装Firebase，确认安装过程无报错
  3. 检查package.json配置：打开根目录下的package.json，查看dependencies字段下是否存在firebase条目，若不存在说明安装未成功，重复上一步操作
  4. 清理缓存重启服务：执行npm cache clean --force清理npm缓存，之后重启本地开发服务重试

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