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

Question

我尝试使用 React 进行 firabase 身份验证，但它显示错误，"Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase')". 如果我使用import * as firebase from "firebase/app"，则停止显示错误的代码。

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;

Answer 1

Firebase 模块化 SDK ( v9) 已正式发布，npm install firebase现在安装此版本而不是旧namespaced版本 ( v8)。如果您正在使用，v9请将代码重构为：

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getDatabase } from "firebase/database";

const app = initializeApp({...config});

export const auth = getAuth()
const database = getDatabase();

export { auth, database }

我建议遵循文档并继续使用新的模块化 SDK。如果您有现有的并且想要使用现有的命名空间版本，那么您可以将导入替换为兼容库，如下所示：

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

firebase.initializeApp({...config})

const auth = firebase.auth()
const database = firebase.database()

查看来自 Firebase 的这段视频，了解 v9 的入门知识。