React+Next.js项目中import firebase from 'firebase'模块导入失败问题求助

你遇到的问题核心原因是Firebase 9.0.0采用了全新的模块化API架构，彻底放弃了旧版本中import firebase from 'firebase'这种默认导入的方式，这也是报错提示"Package path . is not exported"的直接诱因。下面给你两种可行的解决方案：

方案一：使用Firebase 9模块化API（官方推荐） #

这种方式能利用tree-shaking特性大幅减少打包体积，是Firebase官方主推的写法。修改你的firebase.js文件如下：

// 按需导入Firebase模块化函数
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";

const firebaseConfig = {
  apiKey: "fasdfsadfdsafjsafsafsfsfsfsfs",
  authDomain: "facebook-clone-13234.firebaseapp.com",
  projectId: "facebook-clone-13234",
  storageBucket: "facebook-clone-13234.appspot.com",
  messagingSenderId: "76247424324242",
  appId: "1:762470571881:web:20a2432424324424324424",
  measurementId: "G-9RDT591EEG",
};

// 初始化Firebase应用
const app = initializeApp(firebaseConfig);

// 获取Firestore和Storage实例
const db = getFirestore(app);
const storage = getStorage(app);

export { db, storage };

方案二：兼容旧版本命名空间写法（快速适配） #

如果不想大规模修改现有代码，可以使用Firebase的compat兼容层，它允许你继续沿用v8及之前的写法：

// 导入compat版本的Firebase核心与服务
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import 'firebase/compat/storage';

const firebaseConfig = {
  apiKey: "fasdfsadfdsafjsafsafsfsfsfsfs",
  authDomain: "facebook-clone-13234.firebaseapp.com",
  projectId: "facebook-clone-13234",
  storageBucket: "facebook-clone-13234.appspot.com",
  messagingSenderId: "76247424324242",
  appId: "1:762470571881:web:20a2432424324424324424",
  measurementId: "G-9RDT591EEG",
};

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

export { db, storage };

补充说明 #

• 优先推荐方案一，compat层仅作为过渡方案存在，未来会逐步被淘汰，且模块化API能带来更优的性能表现。
• 无需额外安装依赖，你的package.json中firebase@9.0.0的版本已经支持上述两种写法。

内容的提问来源于stack exchange，提问作者Krishnadev. V