如何修复Firebase 9.0导入错误：'firebase/app'无默认导出（导入为'firebase'）

错误原因 #

你安装的是Firebase 9及以上版本，该版本移除了firebase/app的默认导出，全面改用模块化命名导出的API，旧版本的导入和调用语法不再兼容。

方案1：最小改动兼容修复 #

适合不想调整现有业务逻辑，快速解决报错的场景，只需要修改firebase.js的导入路径即可，其余代码完全不用改动：

// 改用compat兼容入口适配老语法
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 #

Firebase 9+的模块化写法支持tree shaking，能有效减少打包体积，是官方推荐的写法，需要同步调整firebase.js和AuthContext的代码：

第一步：修改firebase.js代码 #

// 导入模块化API
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,
});

// 保持auth导出名不变，适配现有引用
export const auth = getAuth(app);
export default app;

第二步：修改AuthContext代码 #

import React, { useContext, useState, useEffect } from "react";
import { auth } from "../firebase";
// 导入需要的auth模块化方法
import { createUserWithEmailAndPassword, onAuthStateChanged } from "firebase/auth";

const AuthContext = React.createContext();

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

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

  function signup(email, password) {
    // 新API将auth实例作为第一个参数传入
    return createUserWithEmailAndPassword(auth, email, password);
  }

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

    return unsubscribe;
  }, []);

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

export default AuthProvider;

注意事项 #

• 两种方案二选一即可，不要混用导入路径和API，避免出现异常
• 修改.env文件后必须重启React开发服务器，新的环境变量才会生效

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