Firebase error: No firebase app default has been created

Question

I am making a food delivery app using react-native and redux. I want to fetch the data from the firebase store and for that, I have written a function in the actions.js, but whenever I run the app it shows the Error

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

Here is the function which I am using to fetch the data action.js

import firebase from "firebase"
export const ProductDetails = (data) => {
  return {
    type: "PRODUCT_ITEMS",
    payload: {
      data,
    },
  };
};

var db = firebase.firestore();
var docRef = db.collection("Products").doc("Items");
export const FetchItems = () => {
  return async function (dispatch) {
    return await docRef
      .get()
      .then((doc) => {
        if (doc.exists) {
          console.log("Document Data", doc.data());
          dispatch(ProductDetails(doc.data));
        } else {
          console.log("NO such document");
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };
};

Here is my App.js file

import React, { useState } from "react";
import { StyleSheet, Text, View, Dimensions } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import AppStack from "./components/navigation/AppStack";

import firebase from "firebase";
import {Provider} from "redux"
import store from "./store"

import { useDispatch, useSelector, Provider } from "react-redux";
import store from "./redux/store";
import AppWrapper from "./AppWrapper";

export default function App() {
  
  const firebaseConfig = {
  };
  if (firebase.apps.length === 0) {
    firebase.initializeApp(firebaseConfig);
  }
  return  (
    <Provider store={store}>
      <NavigationContainer>
        <AppStack />
      </NavigationContainer>
    </Provider>
  );;
}

Answer 1

I would recommend creating a separate file firebase.js and export Firebase services from there after initialization.

firebase.js

import firebase from 'firebase/app';
import 'firebase/firestore'

const firebaseConfig = {...};

if (!firebase.apps.length) {
  firebase.initializeApp(config);
}

export const auth = firebase.auth();
export const firestore = firebase.firestore()

Then import these wherever you need them:

// App.js for example

import {firestore, auth} from './firebase.js'

//var docRef = firestore.collection("Products").doc("Items");

Answer 2

for users with expo(v44) and firebase(v9)

firebaseUtil.js

import { initializeApp, getApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth } from "firebase/auth";

// Initialize Firebase
const firebaseConfig = {
  ...
};

const app = initializeApp(firebaseConfig);

const db = getFirestore(app);
const auth = getAuth(app);

export { db, auth };

Login.js

import { auth } from "../../util/firebaseUtil";

export default function Login() {

  const onSignUp = () => {
    signInWithEmailAndPassword(auth, email, password);
  };

  return (
    ...
  )

}

Answer 3

I think my error is caused by Webpack chunking(bootstrap). I did import the file with initializeApp(). My work around for who has the same problem.

1. Modularize the initializeApp in one file(initFire for me) and export anything(doesn't have to be app)
2. Import & Export before first usage of getApp()(methods like getAuth() will call it),
3. In this way, after Webpack it will still run first. (ES6 export {app} from "./initFire")

(This answer is grepped from my own GitHub Wiki, not plagiarizing)