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"
  }
}