升级到 Firebase JS 8.0.0：尝试导入错误：“app”未从“firebase/app”导出（导入为“firebase”）

Question

升级到 8.0.0 后，出现以下错误：

尝试导入错误：“initializeApp”未从“firebase/app”导出（导入为“firebase”）。

我的导入看起来像这样：

import * as firebase from "firebase/app"
firebase.initializeApp({ ... })

TypeScript 也抱怨：

类型“typeof import("/path/to/my/file")”上不存在属性“initializeApp”。ts(2339)

我该如何解决？

Answer 1

在8.0.0版本中，Firebase SDK 处理导出的方式发生了重大变化：

重大变化：browserpackage.json 文件中的字段现在指向 ESM 包而不是 CJS 包。使用 ESM 导入的用户现在必须使用默认导入而不是命名空间导入。

8.0.0 之前

import * as firebase from 'firebase/app'

8.0.0之后

import firebase from 'firebase/app'

使用require('firebase/app')或require('firebase')仍然有效的代码，但为了获得正确的类型（例如，用于代码完成），用户应该将这些 require 调用更改为 require('firebase/app').default或require('firebase').default。这是因为 SDK 现在对 ESM 包使用类型化，并且不同的包共享一个类型化文件。

因此，您必须使用新的 ESM 包默认导出：

import * as firebase from 'firebase/app'

如果您使用的是SDK 版本 9.0，请改为阅读以下问题：

• 如何修复 Firebase 9.0 导入错误？“尝试导入错误：‘firebase/app’不包含默认导出（导入为‘firebase’）。”

Answer 2

导入 firebase 的旧方法：从“firebase/app”导入 * 作为 firebase；

在 8.0.0 版本中导入的新方法：从“firebase/app”导入 firebase

例如：我这样做的方式。只有前 2 行是相关的，其他行仅作为我的代码的一部分添加，但它非常通用 tbh！

import firebase from "firebase/app"
import "firebase/auth"

const firebaseConfig = {
  apiKey: XXXX,
  authDomain: XXX,
  projectId: XXXX,
  storageBucket: XXXX,
  messagingSenderId: XXXX,
  appId: XXXX,
}


if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig)
}


export const auth = firebase.auth() 
export const googleAuthProvider = new firebase.auth.GoogleAuthProvider()

用你的数据替换 XXXX，只是要清楚:)

Answer 3

尝试将其用于上面的 firebase 9

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

或者您可以阅读更多信息：https://firebase.google.com/docs/web/modular-upgrade