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

【问题标题】：How do I fix a Firebase 9.0 import error? "Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase')."如何修复 Firebase 9.0 导入错误？ “尝试导入错误：‘firebase/app’不包含默认导出（导入为‘firebase’）。”
【发布时间】：2021-10-26 23:34:42
【问题描述】：

我正在尝试在我的 React 应用程序中实现 firebase，但我的导入版本似乎已经过时了。这是我的代码：

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

const app = firebase.initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
});

export const auth = app.auth();
export default app;

我已将配置键替换为 process.env.REACT_APP_FIREBASE...，因为它们存储在另一个本地 .env 文件中。我也尝试过不同的方式来导入 firebase，但似乎大多数帖子都已经过时了。这是我得到的错误：

./src/firebase.js 尝试导入错误：“firebase/app”不包含默认导出（导入为“firebase”）。

我还有另一个 authContext 文件，所以我需要在我的 firebase.js 文件中保留“auth”关键字：

import React, { useContext, useState, useEffect } from "react";
import { auth } from "../firebase";

const AuthContext = React.createContext();

export function useAuth() {
  return useContext(AuthContext);
}

const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState();

  function signup(email, password) {
    return auth.createUserWithEmailAndPassword(email, password);
  }

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      setCurrentUser(user);
    });

    return unsubscribe;
  }, []);

  const value = {
    currentUser,
    signup,
  };
  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
};

export default AuthProvider;

【问题讨论】：

v9 发生了巨大变化，您检查过文档吗？

标签： reactjs firebase firebase-realtime-database firebase-authentication

【解决方案1】：

按照documentation 中的说明进行操作，其中专门列出了版本 9 的步骤：

使用 npm 安装 Firebase：
npm install firebase
在您的应用中初始化 Firebase 并创建一个 Firebase 应用对象：
import { initializeApp } from 'firebase/app';

// TODO: Replace the following with your app's Firebase project
configuration const firebaseConfig = {   //... };

const app = initializeApp(firebaseConfig);

这与任何以前版本的 Firebase SDK 的任何方法都完全不同。请注意，您是从 Firebase SDK 导入单个函数，而不是对象或命名空间。

要使用 Firebase 身份验证，请再次按照 v9 的 documentation 中的说明进行操作：

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();

createUserWithEmailAndPassword(auth, email, password);

再次注意，您导入的是要直接调用的函数，而不是带有方法的对象。

与版本 8 的旧进程比较：Upgrade to Firebase JS 8.0.0: Attempted import error: 'app' is not exported from 'firebase/app' (imported as 'firebase')

【讨论】：

如果它是这样模块化的，那么使用一些 ContextProvider 来包装你的 react 应用程序就没有意义了，我可以直接在我的文件中导入函数，对吧？

【解决方案2】：

如果您使用的是 9.0 版，则应将您的 firebase 版本降级到 8.9.1

然后像这样导入firebase：

从“firebase/app”导入firebase

【讨论】：

【解决方案3】：

在第 9 版中，导入 firebase 的事情发生了一些变化，但无需降级到以前的版本，有一个“兼容性”选项，因此可以在导入时使用 /compat 文件夹，就像这样

import firebase from 'firebase/compat/app';

来自 Firebase upgrade guide：

为了在更新依赖项后保持代码正常运行从 v8 到 v9 beta，将您的导入语句更改为使用“compat” 每个导入的版本。例如：
// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

【讨论】：

【解决方案4】：

在 npm 上使用以下命令检查您的 firebase 版本

$ firebase -V
如果您的 firebase 版本是 v8 导入如下

从“firebase/app”导入firebase 导入“firebase/auth”
如果您的 firebase 版本是 v9 导入如下

从 'firebase/compat/app' 导入 firebase；导入'firebase/compat/auth';

【讨论】：

【解决方案5】：

卸载并重新安装 firebase 到降级版本。我刚刚这样做，安装了 8.10.0 版本，并且工作正常。

【讨论】：

【解决方案6】：

如果您在 10 月 21 日及以后的日子这样做，则需要这样做

import {initializeApp}  from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'
import 'firebase/storage'
 var config = {
    apiKey: "xxxxx",
    authDomain: "xx.firebaseapp.com",
    projectId: "cxxx7",
    storageBucket: "cxxx",
    messagingSenderId: "xx",
    appId: "zzze",
    measurementId: "xxx"
}
    const firebaseApp =  initializeApp(config);

    export default firebaseApp;

【讨论】：

【解决方案7】：

当您使用高于 V8 的 Firebase 时会出现此错误。

不过，有一个简单的解决方法，firebase 包括向后兼容性。您只需将导入从 firebase/app 更改为 firebase/compat/app。

这将改变：

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

到：

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

【讨论】：

【解决方案8】：

Firebase v9 带有新的 API，旨在促进 tree-shaking（删除未使用的代码）。这将使您的网络应用程序尽可能小而快。

/compat 包的创建是为了兼容并简化模块化 API 的升级。没有获得性能津贴的缺点。要获得模块化设计的性能优势，请改用getApps：

import { getApps, initializeApp } from 'firebase/app';

if (!getApps().length) {
  initializeApp({
    // your config
  });
}

来自库的 JSDoc：getApps return A (read-only) array of all initialized apps.。

还有一个getApp函数When called with no arguments, the default app is returned. When an app name is provided, the app corresponding to that name is returned. An exception is thrown if the app being retrieved has not yet been initialized.

【讨论】：