执行npm i firebase后导入firebase报Can't resolve 'firebase'错误如何解决

第一步：排查依赖安装问题 #

• 确认执行npm i firebase命令的路径是项目根目录，即package.json文件所在的目录，不要在src等子目录下执行安装命令。
• 打开项目根目录的package.json文件，检查dependencies字段下是否存在firebase条目，确认依赖已成功写入依赖清单。
• 若确认已写入清单仍报错，删除项目根目录的node_modules文件夹和package-lock.json文件，重新执行npm install命令重装所有依赖，排除安装不完整或缓存问题。
• 检查firebase.js文件中的导入语句是否存在拼写错误，确认导入的包名是firebase而非拼写错误的字符串。

第二步：排查版本适配问题 #

注意：Firebase v9及以上版本废弃了import firebase from 'firebase'的默认导出写法，如果你安装的是v9及以上版本，默认使用ESM模块化语法，无全局默认导出，就会触发模块找不到的报错。

可选解决方案 #

方案1：使用v9+兼容模式（适配旧代码） #

如果不想改动原有v8版本的代码逻辑，只需修改导入路径为compat兼容路径即可：

// 导入核心兼容包
import firebase from 'firebase/compat/app';
// 用到的附加服务也需要走compat路径导入，示例如下
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import 'firebase/compat/storage';

后续初始化、调用方法和原有v8版本逻辑完全一致，无需额外修改。

方案2：使用v9+模块化写法（官方推荐） #

采用官方新推出的树摇友好的模块化语法，按需导入需要的功能：

// 导入核心初始化方法
import { initializeApp } from "firebase/app";
// 按需导入需要的服务
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";

// 替换为你自己的Firebase项目配置
const firebaseConfig = {
  apiKey: "你的apiKey",
  authDomain: "你的authDomain",
  projectId: "你的projectId",
  storageBucket: "你的storageBucket",
  messagingSenderId: "你的messagingSenderId",
  appId: "你的appId"
};

// 初始化实例
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const storage = getStorage(app);

方案3：降级到v8版本 #

如果业务需要继续使用原有写法，可指定安装v8的最后稳定版本：

npm i firebase@8.10.0

安装完成后原有import firebase from 'firebase'写法可直接正常运行。

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