react firebase initializeApp is not defined-CodePudding

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

CodePudding user response：

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