Next.js，Firebase，未处理的运行时错误-TypeError：无法读取未定义的属性“initializeApp”答案

【问题标题】：Next.js, Firebase, Unhandled Runtime Error - TypeError: Cannot read property 'initializeApp' of undefinedNext.js，Firebase，未处理的运行时错误-TypeError：无法读取未定义的属性“initializeApp”
【发布时间】：2021-12-10 23:00:53
【问题描述】：

我不知道为什么会发生这个错误......但我怀疑这个文件会导致什么？特别是，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>
  );
}

【问题讨论】：

标签： javascript reactjs typescript firebase next.js

【解决方案1】：

在新版本的 Firebase 中，要导入的语法发生了变化。试试这个： import { initializeApp } from 'firebase/app'; 我建议您阅读这篇文章以识别和修复您的应用程序中的其他问题。 https://firebase.googleblog.com/2021/08/the-new-firebase-js-sdk-now-ga.html

【讨论】：

感谢您的快速回复。
如果我的评论对你有帮助，请给我一个赞！
是的给了你，如何导入它是非常问题的，但这是由外部库而不是我自己的代码引起的......这就是为什么很难找到它的原因。

【解决方案2】：

最后，我发现我上面使用的这个名为“react-firebaseui/StyledFirebaseAuth”的库支持firebase 8.xx版本而不是上面的v9，所以这就是为什么标题中显示了这个错误消息的原因。

为了解决这个问题，

降级和调整库所需的 Firebase 版本
或将库切换到另一个库以显示身份验证按钮。

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。