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

Question

我正在尝试在我的 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;

Answer 1

当您使用高于 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';

Answer 2

按照文档中的说明进行操作，其中特别指出了版本 9 的步骤：

1. 使用 npm 安装 Firebase：

npm install firebase

2. 在您的应用中初始化 Firebase 并创建 Firebase App 对象：

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 Auth，请再次按照v9文档中的说明进行操作：

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

const auth = getAuth();

createUserWithEmailAndPassword(auth, email, password);

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

与版本 8 的旧流程相比：升级到 Firebase JS 8.0.0：尝试导入错误：'app' 未从 'firebase/app' 导出（导入为 'firebase'）

Answer 3

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

import firebase from 'firebase/compat/app';

来自 Firebase 文档：

为了在将依赖项从 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';