Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app-compat/no-app)

Question

I am using a react js to build a gallery program, using firebase as the backend.

But I got some error and error in the config.js. I already follow some questions here, but nothing works for me.

So this is my config.js:

// import firebase from 'firebase/app';
import firebase from 'firebase/compat/app';
// import { initializeApp } from 'firebase/app';
// import 'firebase/compat/auth';
// import 'firebase/compat/firestore';
import 'firebase/storage';
import 'firebase/firestore';
import 'firebase/compat/storage'


// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
// firebase.initializeApp();

  const projectStorage = firebase.storage();
  const projectFirestore = firebase.firestore();

  export { projectStorage, projectFirestore}

The error I got is: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app-compat/no-app).

See that I commented on the code, to see some errors, and it still giving me the same result.

Note: I am using firebase ^9.16.0" React JS

Answer 1

I found the solution for my own problem.

So that If you're using version 9 (in my case firebase 9.16.0) so you also have to add import 'firebase/compat/firestore'; not import 'firebase/firestore';

This returns me TypeError: firebase_compat_app__WEBPACK_IMPORTED_MODULE_0__.default.firestore is not a function

And then changed the way to initialize the app from const app = initializeApp(firebaseConfig); to firebase.initializeApp(firebaseConfig);

Now it works fine in my project.

My final code is below, and you can see the different between the above one in the question:

import firebase from 'firebase/compat/app';
import "firebase/database"
import 'firebase/storage';
import 'firebase/compat/firestore';
import 'firebase/compat/storage';


// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "your api",
  authDomain: "your domain",
  projectId: "your project id",
  storageBucket: "your storage",
  messagingSenderId: "your id",
  appId: "your app id"
};

// Initialize Firebase
// const app = initializeApp(firebaseConfig);
firebase.initializeApp(firebaseConfig);

  const projectStorage = firebase.storage();
  const projectFirestore = firebase.firestore();

  export { projectStorage, projectFirestore}