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

Question

I have no idea why this error happens... but I suspect this file causes something?? Especially, firebaseAuth={getAuth(app)} might be a problem. Before that, const app = initializeApp(firebaseConfig); is defined in "../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

With new version of Firebase the syntax to import is changed. Try with this: import { initializeApp } from 'firebase/app'; I suggest you to read this post to identify and fix other problem in your app. https://firebase.googleblog.com/2021/08/the-new-firebase-js-sdk-now-ga.html

Answer 2

Finally, I found that this library called "react-firebaseui/StyledFirebaseAuth", which I use above, support firebase version 8.xx instead of v9 above, so this is why this error message in title has been shown.

To fix this,

1. downgrade and adjust firebase version that the library requires
2. or switch the library with another one to display authentication button.