尝试导入错误：“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 入门。

Answer 2

使用此导出方法

import {firebase} from 'firebase/app';

代替

import firebase from 'firebase/app';