Firebase v9使用compat模式导入提示Can't resolve 'firebase'如何解决

报错原因 #

• 核心问题是Firebase v9默认使用模块化API，不再提供根路径的默认导出firebase对象，你当前的firebase.js配置文件仍使用v8版本的导入语法import firebase from 'firebase'，导致模块解析失败。
• 你选择使用compat兼容模式，但仅在Preview.js中修改了导入语句，配置文件未同步修改，且未导入对应服务的compat版本依赖。

解决方案 #

步骤1：确认Firebase包已正确安装 #

如果未安装对应版本，执行以下命令：

npm install firebase@9.1.2
# 或使用yarn
yarn add firebase@9.1.2

步骤2：修改firebase.js配置文件 #

将配置文件的导入部分全部替换为compat模式的导入，同时引入需要用到的服务的compat版本，完整修改后的代码如下：

import firebase from 'firebase/compat/app';
// 引入对应服务的compat版本，保持v8的API调用方式
import 'firebase/compat/firestore';
import 'firebase/compat/auth';
import 'firebase/compat/storage';

const firebaseConfig = {
  apiKey: "***",
  authDomain: "***.firebaseapp.com",
  projectId: "***",
  storageBucket: "***",
  messagingSenderId: "***",
  appId: "1:***:web:***"
};

const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore();
const auth = firebase.auth();
const storage = firebase.storage();
const provider = new firebase.auth.GoogleAuthProvider();

export { db, auth, storage, provider };

步骤3：修复Preview.js中的代码笔误 #

你的Preview.js中存在3处笔误，会导致后续运行报错，同步修改即可：

1. 存储路径的模板字符串使用了单引号，需要改为反引号：把.ref('posts/${id}')改为.ref(posts/${id})
2. 下载链接方法名拼写错误：把.gedDownloadURL()改为.getDownloadURL()
3. 时间戳字段名拼写错误：把timstamp改为timestamp

修改完成后重启项目即可正常运行。

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