react firebase initializeApp is not defined

byMR

January 26, 2022

I am trying to use firebase storage on react app,
but I get a error that I dont know where is coming from

Line 15:15: ‘initializeApp’ is not defined

This is my config.js File

Thanks for help

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

const firebaseConfig = {
    apiKey: "//myapikey",
    authDomain: "//firebase name.firebaseapp.com",
    projectId: "//firebase name",
    storageBucket: "//firebase name.appspot.com",
    messagingSenderId: "156082439629",
    appId: "//appid..."
};

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

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

export {
    projectStorage,
    projectFirestore
};

>Solution :

If you want to use compat version of Firebase SDK then you would have to import compat version of other Firebase services too. Try refactoring the code as shown below:

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

const firebaseConfig = {...};

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

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

export {
    projectStorage,
    projectFirestore
};

However, I would recommend using the Modular SDK and initialize Firebase like this:

import { initializeApp } from "firebase/app";
import { getStorage } from 'firebase/storage';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {...};

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

const projectStorage = getStorage();
const projectFirestore = getFirestore();

export {
    projectStorage,
    projectFirestore
};

Also checkout Getting started with Firebase for the web