Uncaught FirebaseError: projectId must be a string in FirebaseApp.options

So, I was working on a React project and setting up my Firebase connection, and after firebase deploy — only hosting this happened:

It worked fine locally and please don’t start saying that I forgot my config file. Here it is:

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore"; 
const firebaseConfig = {
apiKey: "***",
authDomain: "***",
databaseURL: "***",
projectId: "***",
storageBucket: "***",
messagingSenderId: "***",
appId: "***",
measurementId: "***",
};
// Initialize Firebase instance
firebase.initializeApp(firebaseConfig);
// Initialize other services on firebase instance
firebase.firestore(); 
export default firebase;

So, what was the problem? The problem was that the firebase export was previously that initializeApp() had been completed. And then in my App.js I used uninitialized firebase. Sometimes page reloading fixed the problem, but I knew there was a problem.

So, what I did? I passed all the firebase imports and initialization directly to my App.js where I was using the firebase instance inside my Context Provider. Without any export default firebase.

Another alternative could be this (if I hadn’t needed firestore):

... 
export default firebase.initializeApp(firebaseConfig);

I hope it was useful. See you.

EDIT 11/10/2020

I have found another way to deal with firebase. We can just create a new variable with the initialized firebase and export it, not the imported firebase.

// firebase.js
import firebase from "firebase/app"
import "firebase/auth"
const firebaseConfig = {...}
const firebaseApp = firebase.initializeApp(firebaseConfig)
export const auth = firebaseApp.auth()
export default firebaseApp

And then, somewhere in your code:

import firebase, { auth } from "...../firebase.js"
// here firebase is the firebaseApp, the default exported instance