升级Firebase至10.12.4后出现compat/app无default导出编译错误

错误原因 #

Firebase 10.12.4版本调整了firebase/compat/app模块的导出规则，不再提供默认导出（default export）。你的代码使用import firebase from 'firebase/compat/app'这种默认导入方式，与新版本的导出规则不匹配，因此触发编译错误。

解决方法 #

方法一：适配compat模块的命名导出 #

修改代码中的导入语句，改用命名导入方式：

// 替换默认导入为命名导入
import { firebase } from 'firebase/compat/app';
import "firebase/compat/auth";
import "firebase/compat/database";
import "firebase/compat/firestore";
import "firebase/compat/storage";

const firebaseConfig = {
  apiKey: "xxx",
  authDomain: "xxx",
  databaseURL: "xxx",
  projectId: "xxx",
  storageBucket: "xxx",
  messagingSenderId: "xxx",
  appId: "xxx",
  measurementId: "xxx",
};

firebase.initializeApp(firebaseConfig);

firebase.firestore().settings({ 
  experimentalForceLongPolling: false, 
  cacheSizeBytes: firebase.firestore.CACHE_SIZE_UNLIMITED, 
  merge: true 
});

export const storage = firebase.storage(); 
export default firebase;

方法二：迁移到官方推荐的模块化API（更推荐） #

Firebase v9及以上版本推荐使用模块化API，体积更小、性能更优，且能避免后续版本的兼容问题。代码示例：

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getDatabase } from "firebase/database";
import { getFirestore, CACHE_SIZE_UNLIMITED, initializeFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";

const firebaseConfig = {
  apiKey: "xxx",
  authDomain: "xxx",
  databaseURL: "xxx",
  projectId: "xxx",
  storageBucket: "xxx",
  messagingSenderId: "xxx",
  appId: "xxx",
  measurementId: "xxx",
};

const app = initializeApp(firebaseConfig);

// 初始化Firestore并配置参数
const db = initializeFirestore(app, {
  experimentalForceLongPolling: false,
  cacheSizeBytes: CACHE_SIZE_UNLIMITED
});

export const auth = getAuth(app);
export const database = getDatabase(app);
export const storage = getStorage(app);
export { db as firestore };
export default app;

注意事项 #

• 若继续使用compat兼容层，需确保所有firebase/compat/*模块的导入都适配命名导出规则；
• 模块化API是Firebase官方主推的写法，长期来看能减少版本更新带来的适配成本。

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