Vue 2 导入 Firebase 9.0.0 报 export 'default' 未找到错误求助

你安装的 Firebase 9.0.0 版本全面采用了ESM模块化API设计，不再提供默认导出，因此适配 Firebase 8.x 及更早版本的导入写法会触发该报错，进而导致项目渲染、路由逻辑异常。

有两种可选方案，可根据项目需求选择：

方案1：使用兼容模式（无需修改现有业务逻辑） #

直接修改导入路径为compat兼容版本即可，原有调用firebase的代码无需任何改动：

import firebase from 'firebase/compat/app'
import 'firebase/compat/auth'
import 'firebase/compat/firestore'

该模式是 Firebase 9 专门为旧版本代码做的向下兼容方案，适合不想改动现有业务代码的场景。

方案2：升级为 Firebase 9 原生模块化API（推荐） #

原生模块化API支持tree shaking，可大幅减少打包后的体积，性能更优。调整写法如下：

初始化代码示例 #

// 导入命名导出的核心方法
import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
import { getFirestore } from 'firebase/firestore'

// 替换为你自己的Firebase项目配置
const firebaseConfig = {
  apiKey: "你的项目apiKey",
  authDomain: "你的项目authDomain",
  projectId: "你的项目projectId",
  storageBucket: "你的项目storageBucket",
  messagingSenderId: "你的项目messagingSenderId",
  appId: "你的项目appId"
}

// 初始化实例
const app = initializeApp(firebaseConfig)
const auth = getAuth(app)
const db = getFirestore(app)

// 导出需要的实例供全局使用
export { auth, db }

业务调用调整示例 #

原有链式调用firebase实例的写法，要调整为传入实例调用对应方法的写法：

// 旧写法
// firebase.auth().signInWithEmailAndPassword(email, password)

// 新写法
import { signInWithEmailAndPassword } from 'firebase/auth'
signInWithEmailAndPassword(auth, email, password)
  .then(userCredential => {
    // 原有业务逻辑
  })

内容的提问来源于stack exchange，提问作者T. Lerner