Next.js连接Firebase时出现Package path . is not exported错误如何解决？

错误产生原因 #

你本地安装的是9.0及以上版本的Firebase SDK，该版本做了破坏性架构调整，完全废弃了8.x及更早版本的全局导入模式，firebase包的package.json中没有声明根路径的导出规则，因此import * as firebase from "firebase"的导入方式无法被识别，触发模块未找到报错。

报错中提示的Did you mean './firebase'属于Next.js路径解析的误判，和本次问题无关，不需要修改_app.js中import { auth, db } from "../firebase"的导入语句。

修复方案 #

方案1：兼容模式快速适配（无业务代码改动） #

如果不想调整现有业务逻辑，只需要修改firebase.js的导入语句，引入Firebase提供的兼容层入口即可：

// 替换原有全局导入语句
import * as firebase from "firebase/compat/app";
// 引入用到的能力的兼容版本
import "firebase/compat/auth";
import "firebase/compat/firestore";

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

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：使用新版模块化API（官方推荐） #

新版API支持Tree Shaking，打包后体积更小，性能更优，需要改写firebase.js的代码适配新语法：

// 导入核心初始化API
import { initializeApp, getApps, getApp } from "firebase/app";
// 导入对应能力的模块化API
import { getFirestore } from "firebase/firestore";
import { getAuth, GoogleAuthProvider } from "firebase/auth";

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

// 初始化逻辑调整为新API
const app = !getApps().length
  ? initializeApp(firebaseConfig)
  : getApp();

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

export { db, auth, provider };

后续如果使用Firebase其他能力（如存储、云函数等），统一从对应子包导入模块化API即可，比如存储能力从firebase/storage导入。

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