Cannot read property 'length' of undefined in firebase on next js-CodePudding

I am using firebase in next js but it gives an error message as

TypeError: Cannot read property 'length' of undefined Any way how i can fix this error.

Here is my firebase config file

import * as firebase from "firebase/app";
import 'firebase/firestore'
const firebaseConfig = {
  apiKey: "AIzaSyD0Kz7iRs6WKSXO6Iw2hEeDFeRcDGERmV8",
  authDomain: "facebook-clone-1870b.firebaseapp.com",
  projectId: "facebook-clone-1870b",
  storageBucket: "facebook-clone-1870b.appspot.com",
  messagingSenderId: "924586129038",
  appId: "1:924586129038:web:1d4204813a4956bd353bdf"
};

const app = !firebase.apps.length
    ? firebase.initializeApp(firebaseConfig)
    : firebase.app();

const db = app.firestore();
const storage = firebase.storage();

export  {db,storage};

Here is error message

.next\server\pages\index.js (12:13) @ Object../firebasec.js

  10 | };
  11 | 
> 12 | const app = !firebase.apps.length
     |             ^
  13 |     ? firebase.initializeApp(firebaseConfig)
  14 |     : firebase.app();

Package.json file

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@heroicons/react": "^1.0.4",
    "firebase": "^9.1.3",
    "next": "11.1.2",
    "next-auth": "^3.29.0",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "autoprefixer": "^10.3.7",
    "eslint": "7.32.0",
    "eslint-config-next": "11.1.2",
    "postcss": "^8.3.11",
    "tailwindcss": "^2.2.17"
  }
}

CodePudding user response：

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]