Next.js, Firebase, Unhandled Runtime Error - TypeError: Cannot read property 'initializeApp&#03-CodePudding

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>
  );
}

CodePudding user response：

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

CodePudding user response：

Thank you for your quick reply. With your advice, I found that I really do what you say, but unfortunately this library "react-firebaseui/StyledFirebaseAuth", which I use above, support firebase v8 instead of v9. So this is why this error message in title has been shown, and I have to switch it with another way.