Next.js & Firebase -> TypeError: Cannot read properties of undefined (reading 'apps') [duplicate]

Question

what I am trying to do, is to code an auth. with NextJS and Firebase.

Now the problem appears in my firebaseClient.js, where I get the error "TypeError: Cannot read properties of undefined (reading 'apps')".

The code looks like this:

import firebase from "firebase/app";

import "firebase/auth";
import "firebase/database";

const FIREBASE_CONFIG = {
  // config files from firebase here
};

export default function firebaseClient() {
  if (!firebase.apps.length) {
    firebase.initializeApp(FIREBASE_CONFIG);
  }
}

In the console I get this error: Terminal Error

This appears on the localhost:3000: Error Page on localhost:3000

I am following this YT tutorial here , which is from 2020, so some imports, as far as I can tell, changed.

Answer 1

It seems your code has firebase v8 while you have firebase v9 package and it has completely different import structures. This happen lot when you follow some tutorials with v8 and install firebase so it get latest version on default that's v9

What should you do:

1- Remove current version

npm rm firebase

2- install latest of 8.x

npm install [email protected]

Answer 2

I found a tutorial, and the video reproduces 100% of the errors you get with the outdated v8 firebase version. I followed the tutorial and it actually works, and when adapting the code to firebase v9, it runs again.
YouTube Video