下一页.js， Firebase， 未处理的运行时错误 - 类型错误：无法读取未定义的属性'initializeApp'

Question

我不知道为什么会发生这个错误…但我怀疑这个文件导致了什么??特别是，firebaseAuth={getAuth(app)}可能是一个问题。在此之前，const app = initializeApp(firebaseConfig);定义在"../firebase/firebase"

中

import React from "react";
import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth";
import { app } from "../firebase/firebase";
import { getAuth, createUserWithEmailAndPassword, EmailAuthProvider, GoogleAuthProvider, GithubAuthProvider } from "firebase/auth";
// Configure FirebaseUI.
const uiConfig = {
signInFlow: 'popup',
signInSuccessUrl: "/",
signInOptions: [
EmailAuthProvider.PROVIDER_ID,
GoogleAuthProvider.PROVIDER_ID,
GithubAuthProvider.PROVIDER_ID,
],
};
export default function SignInScreen() {
return (
<div>
<h1>PolygonHR Login</h1>
<p>Please sign-in:</p>
<StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={getAuth(app)} />
</div>
);
}

Answer 1

新版本的Firebase更改了导入的语法。试试这个:import { initializeApp } from 'firebase/app';我建议你阅读这篇文章来识别和解决你的应用程序中的其他问题。https://firebase.googleblog.com/2021/08/the-new-firebase-js-sdk-now-ga.html

Answer 2

最后，我发现上面使用的这个名为react-firebaseui/StyledFirebaseAuth&quot的库支持firebase version 8.x。X而不是上面的v9，所以这就是为什么标题中显示了这个错误信息。

要解决这个问题，

1. 降级并调整库要求的firebase版本
2. 或切换库显示认证按钮。