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

Question

I am trying to create a chatroom application using react and firebase. Initially, I got an error while importing auth and firestore at once i.e import { auth, firestore } from 'react';, I tried firebase.auth(); and firebase.firestore(); and I got an error saying that 'auth not defined no-def' and 'firestore not defined no-def', now I have tried const auth = firestore.auth(); and const firestore = firebase.firestore() and I now get an error "Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)."...could someone please help me

Attached is my code

import firebase from 'firebase';
//import 'firebase/app';
//import { auth, firestore } from 'firebase';
//firebase.auth();
//firebase.firestore();
const auth = firebase.auth();
const firestore = firebase.firestore()

export const signup = (user) => {

    return async (dispatch) => {

        const db = firestore();
        auth()
        .createUserWithEmailAndPassword(user.email, user.password)
        .then(user => {
            console.log(user); 
        })
        .catch(error => {
            console.log(error);
        })

    }
}

Answer 1

Before you can use any of the firebase SDKs you need to initialize your firebase App.

This code shows how you initialize the App:

import firebase from "firebase/app";


// Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO",
  authDomain: "myapp-project-123.firebaseapp.com",
  databaseURL: "https://myapp-project-123.firebaseio.com",
  projectId: "myapp-project-123",
  storageBucket: "myapp-project-123.appspot.com",
  messagingSenderId: "65211879809",
  appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c",
  measurementId: "G-8GSGZQ44ST"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Don't forget to replace the configs with those of your firebase project. Here you can see how to get your Firebase configuration.

After that you can run your code.

Make sure the initialization is called before any SDK is used. For that I would also recommend to change your code to this:

import firebase from 'firebase';
//import 'firebase/app';
//import { auth, firestore } from 'firebase';
//firebase.auth();
//firebase.firestore();


export const signup = (user) => {

    return async (dispatch) => {
       const auth = firebase.auth();
       const firestore = firebase.firestore()

        const db = firestore();
        auth()
        .createUserWithEmailAndPassword(user.email, user.password)
        .then(user => {
            console.log(user); 
        })
        .catch(error => {
            console.log(error);
        })

    }
}

Answer 2

Try importing the firebase config file in index.js

import firebase.js