Next.js、Firebase、未處理的運行時錯誤 - TypeError：無法讀取未定義的屬性“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”的庫支持 firebase 版本 8.xx 而不是上面的 v9，所以這就是標題中顯示此錯誤消息的原因。

為了解決這個問題，

1. 降級並調整庫所需的 Firebase 版本
2. 或將庫切換為另一個庫以顯示身份驗證按鈕。