React.jsx类型无效报错求助：Firebase登录注册页面空白

问题描述 #

使用Firebase处理登录/注册表单，已从AuthContext导入AuthProvider，但打开浏览器后页面空白，控制台报错：React.jsx: type is invalid -- expected a string。附上App.js代码：

import "./App.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Profile from "./Profile";
import Register from "./Register";
import VerifyEmail from "./VerifyEmail";
import Login from "./Login";
import { useState, useEffect } from "react";
import { AuthProvider } from "./AuthContext";
import { auth } from "./firebase";
import { onAuthStateChanged } from "firebase/auth";

function App() {
  const [currentUser, setCurrentUser] = useState(null);
  useEffect(() => {
    onAuthStateChanged(auth, (user) => {
      setCurrentUser(user);
    });
  }, []);
  return (
    <Router>
      <AuthProvider value={{ currentUser }}>
        <Switch>
          <Route exact path="/" component={Profile} />
          <Route exact path="/login" component={Login} />
          <Route exact path="/register" component={Register} />
          <Route exact path="/verify-email" component={VerifyEmail} />
        </Switch>
      </AuthProvider>
    </Router>
  );
}

export default App;

排查与解决办法 #

这个错误核心是React无法识别你使用的某个元素类型，通常由组件导入/导出错误或版本不兼容导致，按以下步骤排查：

• 检查AuthContext的导出方式
  打开AuthContext.js，确认AuthProvider的导出是否正确：

  • 若为命名导出，必须确保代码是export const AuthProvider = ...，导入时用import { AuthProvider } from "./AuthContext"（和你当前代码一致）；
  • 若为默认导出，则导入时需改为import AuthProvider from "./AuthContext"，同时AuthContext.js里是export default AuthProvider。
    注意：不能把AuthContext对象本身当作AuthProvider导出，必须是包裹AuthContext.Provider的组件。

• 核对react-router-dom版本兼容性
  如果你安装的是react-router-dom v6，Switch已被移除，改用Routes，同时Route的component属性需替换为element并传入JSX元素：

  // 导入替换
  import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
  
  // 路由部分修改
  <Routes>
    <Route path="/" element={<Profile />} />
    <Route path="/login" element={<Login />} />
    <Route path="/register" element={<Register />} />
    <Route path="/verify-email" element={<VerifyEmail />} />
  </Routes>
  

  若想保留Switch，则需降级到react-router-dom v5（执行npm install react-router-dom@5）。

• 检查子组件的导出正确性
  逐一确认Profile、Login、Register、VerifyEmail这几个组件的导出方式：

  • 若组件是默认导出（如export default Profile），导入时不能加花括号；
  • 若为命名导出（如export const Profile = ...），导入时必须用import { Profile } from "./Profile"。

• 验证AuthProvider的实现
  确保AuthContext.js中的AuthProvider是合法的React组件，示例实现如下：

  import { createContext } from "react";
  
  const AuthContext = createContext();
  
  export const AuthProvider = ({ children, value }) => {
    return (
      <AuthContext.Provider value={value}>
        {children}
      </AuthContext.Provider>
    );
  };
  

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