React集成Firebase认证遇模块未找到错误及页面白屏求助

错误根源 #

你遇到的Module not found错误，是因为Firebase v9+采用了模块化架构，不再支持从firebase根包直接导入auth这类核心对象，必须从对应子包（如firebase/auth）导入，且要使用你自己初始化的auth实例，而非全局auth对象。

至于网站白屏，确实是这个编译错误导致的——模块找不到会让React应用无法完成编译打包，自然加载后显示空白。

修复步骤 #

1. 修正AuthContext的导入语句 #

把AuthContext里的错误导入：

import { auth } from "firebase";

替换为导入你自己在Firebase配置文件中导出的auth实例（注意路径要根据你的文件结构调整，确保能正确定位到配置文件）：

import { auth } from "../../firebaseConfig";

2. 移除冗余的监听代码 #

你的AuthProvider里有两处onAuthStateChanged监听，重复监听会导致不必要的状态更新，删掉外部冗余的那一段：

// 删掉这行代码
auth.onAuthStateChanged((user) => {
  setCurrentUser(user);
});

3. 完整修正后的AuthContext代码 #

import React, { useContext, useState, useEffect } from "react"
// 替换为匹配你项目结构的正确路径
import { auth } from "../../firebaseConfig";

const AuthContext = React.createContext();

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

export function AuthProvider({ children }) {
  const [currentUser, setCurrentUser] = useState();
  const [loading, setLoading] = useState(true);

  function signup(email, password) {
    return auth.createUserWithEmailAndPassword(email, password);
  }

  function login(email, password) {
    return auth.signInWithEmailAndPassword(email, password);
  }

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      setCurrentUser(user);
      setLoading(false);
    });

    return unsubscribe;
  }, []);

  const value = {
    currentUser,
    login,
    signup,
  };
  return (
    <AuthContext.Provider value={value}>
      {!loading && children}
    </AuthContext.Provider>
  );
}

4. 验证Firebase配置文件 #

你的Firebase配置文件是正确的模块化写法，确保它的导出逻辑正常，且在AuthContext中的导入路径无误。

额外提示 #

• 确保Firebase依赖为v9及以上版本，若之前是v8升级而来，需彻底切换到模块化导入方式，禁止混用旧的命名空间写法。
• 可运行npm install firebase@latest更新到最新稳定版，避免版本兼容问题。

内容的提问来源于stack exchange，提问作者INDOMIE-GLITCH