Next.js项目导入Firebase v9出现模块找不到报错如何解决?

问题原因 #

你安装的是Firebase v9版本，该版本采用了全新的模块化架构，废弃了旧版本全局导入firebase对象的用法，package.json的exports字段未暴露根路径的导出规则，因此直接导入"firebase"会触发模块找不到的报错。

解决方案 #

有两种可选方案，你可以根据自己的需求选择：

方案1：使用兼容层快速适配（无需修改原有业务逻辑） #

直接修改你的firebase.js配置文件的导入语句，引入v9版本提供的向下兼容包即可，其余原有代码保持不变：

// 替换原来的import firebase from "firebase"
import firebase from 'firebase/compat/app';
// 引入用到的功能的兼容包
import 'firebase/compat/firestore';
import 'firebase/compat/auth';

const firebaseConfig = {
  apiKey: "AIzaSyAS5PuV434Qb5IqgMHnte1UKha-31PjB-Y",
  authDomain: "whatsapp-2-b5a79.firebaseapp.com",
  projectId: "whatsapp-2-b5a79",
  storageBucket: "whatsapp-2-b5a79.appspot.com",
  messagingSenderId: "960710517268",
  appId: "1:960710517268:web:42e2b65fd273553966fd01",
};

const app = !firebase.apps.length
  ? firebase.initializeApp(firebaseConfig)
  : firebase.app();

const db = app.firestore();
const auth = app.auth();

const provider = new firebase.auth.GoogleAuthProvider();

export { db, auth, provider };

方案2：使用v9原生模块化API（官方推荐，打包体积更小） #

如果愿意调整代码适配新版本写法，可以采用官方推荐的模块化写法，修改后的firebase.js如下：

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth, GoogleAuthProvider } from "firebase/auth";

const firebaseConfig = {
  apiKey: "AIzaSyAS5PuV434Qb5IqgMHnte1UKha-31PjB-Y",
  authDomain: "whatsapp-2-b5a79.firebaseapp.com",
  projectId: "whatsapp-2-b5a79",
  storageBucket: "whatsapp-2-b5a79.appspot.com",
  messagingSenderId: "960710517268",
  appId: "1:960710517268:web:42e2b65fd273553966fd01",
};

const app = initializeApp(firebaseConfig);

const db = getFirestore(app);
const auth = getAuth(app);
const provider = new GoogleAuthProvider();

export { db, auth, provider };

注意：采用该方案后，后续调用firestore、auth相关方法时也需要使用对应的模块化API写法，不能再沿用旧版本的链式调用方式。

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