Firebase & React js - Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app)

Question

First of all, I have gone through my code and don't see anywhere where I might be initialising app more than once (unless I'm missing something).

I know this question has been asked and answered before but I'm not sure how to apply the solution to my own code as I'm just getting started with Firebase.

The error I'm getting is: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).

Here is my config component:

     export const DB_CONFIG = {
      apiKey: "AIzaSyDj_UQoRkOWehv-Ox2IAphOQPqciE6jL6I",
      authDomain: "react-notes-38f8a.firebaseapp.com",
      databaseURL: "https://react-notes-38f8a.firebaseio.com",
      projectId: "react-notes-38f8a",
      storageBucket: "react-notes-38f8a.appspot.com",
      messagingSenderId: "1063805843776"
    };

Here is App.js

      constructor(props){
      super(props);
      this.app = firebase.initializeApp(DB_CONFIG);
      this.database = this.app.database().ref.child('notes')
      this.state = {
        notes: [
        ],
      }
    }

  componentWillMount(){
    const previousNotes = this.state.notes;
    this.database.on('child_added', snap => {
      previousNotes.push({
        id: snap.key,
        noteContent: snap.val().noteContent
      })
    })
    this.setState({
      notes: previousNotes
    })
  }

Answer 1

Pretty Simple to solve out

Initialize Firebase in Conditional Block.

if(!firebase.apps.length)
   firebase.initializeApp(DB_CONFIG);

Analysis: If we won't execute 'Initializing Firebase' inside the conditional block it simply getting confused by re-initialization so far.

Additional Note: This problem is not related to the config component, and we should try not to disclose firebase config credentials for security purposes.

Answer 2

If under this condition your app is defined, your problem will be solved.

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