React使用Firebase认证时出现firebase/app无默认导出错误如何解决？

问题原因 #

你遇到的Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase')报错，是因为当前安装的是Firebase v9及以上版本，该版本重构为模块化可摇树的API结构，废弃了v8及更早版本的默认导出、全局firebase命名空间调用方式。

解决方案1：使用兼容层（无需修改原有业务逻辑） #

如果不想调整现有大量基于v8写法的业务代码，可以直接调整导入路径到Firebase提供的兼容包，其余原有配置代码无需改动：

import firebase from 'firebase/compat/app';
import 'firebase/compat/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;

解决方案2：使用新版模块化API（推荐，可显著减少打包体积） #

直接适配v9+的模块化写法，改写后的配置代码如下：

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

const app = 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 = getAuth(app);
export default app;

适配新API后，后续调用认证相关方法也需要使用对应的模块化导入方式，示例如下：

// 从firebase/auth导入需要的方法
import { createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut } from "firebase/auth";
import { auth } from "./你的firebase配置文件路径";

// 注册示例
const register = async (email, password) => {
  await createUserWithEmailAndPassword(auth, email, password);
}

// 登录示例
const login = async (email, password) => {
  await signInWithEmailAndPassword(auth, email, password);
}

// 登出示例
const logout = async () => {
  await signOut(auth);
}

内容的提问来源于stack exchange，提问作者Maruf Hasnat