6

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
    })
  }
George Bleasdale
  • 343
  • 7
  • 16

4 Answers4

6

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.

Abhinav
  • 97
  • 2
  • 10
perfectionist1
  • 857
  • 2
  • 11
  • 14
  • 1
    Firebase config is completely secure to share: https://stackoverflow.com/questions/37482366/is-it-safe-to-expose-firebase-apikey-to-the-public – Raine Revere May 16 '21 at 17:50
5

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

if (!firebase.apps.length) {
   firebase.initializeApp(DB_CONFIG);
}
sdkcy
  • 3,528
  • 1
  • 16
  • 23
4

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!

DrewT
  • 4,983
  • 2
  • 40
  • 53
  • I tried pasting that code into the constructor but I'm now getting another error - TypeError: Cannot read property 'database' of undefined new App – George Bleasdale Jan 06 '19 at 19:15
  • Yeah, that would happen. It's a race condition because if you are trying to run mount the database using properties of something that isn't ready yet it will complain. You need to wait for Firebase application to be ready before calling `this.database = this.app.database().ref.child('notes')` – DrewT Jan 08 '19 at 20:17
  • If you look at your constructor you are calling `this.app = firebase.initializeApp(DB_CONFIG); this.database = this.app.database().ref.child('notes')` back to back which means these commands will be processed at the same time. You can use deferred Promises to chain them synchronously or you can assign `this.database` value later on in `componentDidMount` for example – DrewT Jan 08 '19 at 20:23
0

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;

Suraj Rao
  • 29,388
  • 11
  • 94
  • 103
opd
  • 1
  • 1