I am encountering an issue with Firebase in Next.js, displaying the error message:
TypeError: Cannot read property 'length' of undefined Is there a way to resolve this error?
Below is my Firebase configuration 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 the 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();
Check out the contents of my package.json file for reference:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "ext 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"
}
}