Unhandled Runtime Error - TypeError: Cannot read property 'initializeApp' of undefined

[hiroshinishio]

I got this error when opening http://localhost:3000/auth. This error seems to be brought by using StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth". Here is my code;

// auth.tsx
// This is sign-up and login page.
import React from "react";
import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth";
import { auth } from "../firebase/firebase";
import { EmailAuthProvider, GoogleAuthProvider, GithubAuthProvider } from "firebase/auth";
import { useAuthState } from "react-firebase-hooks/auth";
import { useRouter } from "next/dist/client/router";

// Configure FirebaseUI.
const uiConfig = {
  signInFlow: 'popup', // Popup signin flow rather than redirect flow.
  signInSuccessUrl: "/", // Redirect to / after sign in is successful. Alternatively you can provide a callbacks.signInSuccess function.
  tosURL: "/terms-of-service",
  privacyPolicyUrl: "/privacy-policy",
  signInOptions: [
    EmailAuthProvider.PROVIDER_ID,
    GoogleAuthProvider.PROVIDER_ID,
    GithubAuthProvider.PROVIDER_ID,
  ],
};

export default function SignInScreen() {

  return (
    <div
      style = {{ // 2 brackets are necessary but not sure why!
        maxWidth: "320px",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <h1>PolygonHR Login</h1>
      <p>Please sign-in:</p>
      <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={auth} />
    </div>
  );
}

And auth comes from below;

// firebase.tsx
import { getApps, initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getFirestore } from "firebase/firestore";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app);
// const analytics = getAnalytics(app);

export { app, auth, db };

And package.json is below. Perhaps, my firebase version is above 9, but this library requires firebase version under 8??

// package.json
{
  "name": "polygon-hr",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "firebase": "^9.1.3",
    "firebase-admin": "^10.0.0",
    "next": "11.1.2",
    "nookies": "^2.5.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-firebase-hooks": "^3.0.4",
    "react-firebaseui": "^5.0.2"
  },
  "devDependencies": {
    "@types/node": "^16.11.1",
    "@types/react": "^17.0.30",
    "eslint": "8.0.1",
    "eslint-config-next": "11.1.2",
    "typescript": "^4.4.4"
  }
}

[hiroshinishio]

[jbdaines]

Looks like this library isn't compatible with firebase v9 see https://github.com/firebase/firebaseui-web-react/pull/158 If you downgrade to v8 it should work.

[jhuleatt]

This library is now compatible with the compat version of Firebase v9. For more context, take a look at this comment: https://github.com/firebase/firebaseui-web-react/pull/158#issuecomment-964269348 in the PR linked by @jbdaines