React接入Firebase9提示未找到default导出报错问题咨询

报错原文：export 'default' (imported as 'Firebase') was not found in './Firebase' (possible exports: auth, db)

问题背景 #

• 配置文件名为Firebase.js（注：描述中提及文件名拼写为Firbase.js，需注意拼写一致性），导入React应用时触发上述报错
• 使用Firebase SDK版本为9.8.3，已尝试引入compact兼容包等公开解决方案，问题未解决
• 原有配置代码、依赖版本如下：
  原有Firebase配置代码：

  import Firebase from "./Firebase";
  const firebaseConfig = {
      apiKey: "AIzaSyCs4EVlGZyp196rW1LEgaFoqEPGEdsLCaQ",
      authDomain: "eshop-44152.firebaseapp.com",
      projectId: "eshop-44152",
      storageBucket: "eshop-44152.appspot.com",
      messagingSenderId: "66308486492",
      appId: "1:66308486492:web:b29fb678562d180870fd99",
      measurementId: "G-SSMTNCXPD9"
    };
  const firebaseApp = Firebase.initializeApp(firebaseConfig);
  
  const db = firebaseApp.firestore();
  
  const auth = Firebase.auth();
  
  export { db, auth };
  

  项目相关依赖版本：

  "firebase": "^9.8.3",
      "firebase-login": "^1.0.0",
      "firebase-tools": "^11.1.0",
  

核心错误点 #

• 循环自引用：在Firebase.js文件内写import Firebase from "./Firebase"属于自己导入自己，Firebase的初始化方法应该从npm安装的firebase依赖包引入，而非从自身配置文件导入
• 导出导入不匹配：配置文件末尾只有export { db, auth }的命名导出，没有写默认导出（export default xxx），使用默认导入语法import Firebase from "./Firebase"自然找不到对应导出项
• API写法不匹配：原有代码用的是Firebase V8及更早版本的全局对象链式调用写法，和V9版本的模块化API规范不兼容
• 文件名拼写风险：描述中提及文件名为Firbase.js（正确拼写为Firebase，中间字母为e而非i），导入路径和实际文件名拼写、大小写不一致也会触发模块查找错误

修复方案 #

优先推荐使用V9原生模块化写法，支持tree-shaking，能有效减少打包体积，配置代码修改为：

// 从firebase依赖包引入对应模块化方法
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
    apiKey: "AIzaSyCs4EVlGZyp196rW1LEgaFoqEPGEdsLCaQ",
    authDomain: "eshop-44152.firebaseapp.com",
    projectId: "eshop-44152",
    storageBucket: "eshop-44152.appspot.com",
    messagingSenderId: "66308486492",
    appId: "1:66308486492:web:b29fb678562d180870fd99",
    measurementId: "G-SSMTNCXPD9"
};

// 初始化Firebase应用
const app = initializeApp(firebaseConfig);
// 初始化对应服务实例
const db = getFirestore(app);
const auth = getAuth(app);

// 导出服务实例供其他文件使用
export { db, auth };

其他业务文件导入时，直接使用命名导入即可，不需要再导入不存在的默认导出：

// 注意路径要和实际文件名完全一致，注意拼写、大小写
import { db, auth } from "./Firebase";

// 后续直接使用db、auth实例即可，不需要重复初始化

如果要兼容原有V8写法，可使用compat兼容包，对应配置代码如下（不推荐，打包体积更大）：

// 从compat路径引入兼容包
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";

const firebaseConfig = {
    // 配置内容和之前一致
};

// 初始化逻辑和V8写法一致
const app = firebase.initializeApp(firebaseConfig);
const db = app.firestore();
const auth = firebase.auth();

// 补充默认导出，匹配原有导入语法
export default firebase;
export { db, auth };

内容的提问来源于stack exchange，提问作者Tech to Study