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

user_10654743 0
Viewed 8754

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
    })
  }
firebase reactjs javascript
4 Answers

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.

user_48422740

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

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

This error occurs when you trying to initialize firebase again and again. It should be initialized only once to avoid Firebase app named ‘[DEFAULT]’ already exists and to achieve this you will have to change your initialization style.

You could do this with an if(!firebase.apps.length) { firebase.initializeApp(DB_CONFIG) }; as suggested above by @sdkcy or, for extra security you can also include a try / catch statement like:

if (!firebase.apps.length) {
    try {
        firebase.initializeApp(DB_CONFIG)
    } catch (err) {
        console.error(‘Firebase initialization error raised’, err.stack)
    }
}

Using a try / catch statement your app should continue to function without breaking, regardless of whether the error was captured. So you can also try this code without the if statement wrapping it if you want to try to figure out why your constructor is being called twice.

Good luck!

user_19589980

This can happen when you use React and put the initializeApp in the Constructor.

It's better to put the this.app = firebase.initializeApp(DB_CONFIG); call in componentDidMount;

user_28188800
Related