I'm a beginner in React and at the moment I try to connect my first app to a Firebase database.

I have two files for that. The first, is a config.js file where all the information about the database are stored, like this:

`export default {
    apiKey: "***",
    authDomain: "***",
    databaseURL: "***",
    projectId: "***",
    storageBucket: "***",
    messagingSenderId: "***"
  };`

And my other file, App.js:

`import React, { Component } from 'react';
import './App.css';

//Firebase
import * as firebase from 'firebase';
import config from 'firebase';


class App extends Component {
constructor () {
    super()

    this.state = { loading: true }
    firebase.initializeApp(config)
  }

  componentWillMount () {
    const capsRef = firebase.database().ref('Capsules')

    capsRef.on('value', snapshot => {
      this.setState({
        Capsules: snapshot.val(),
        loading: false
      })
    })
  }

  render () {
    if (this.state.loading) {
      return (
        <p>Je suis en train de charger.</p>
      )
    }

    const capsRef = Object.keys(this.state.tweets).map(key => {
      return <p key={key}>{this.state.Capsules[key].designation}</p>
    })

    return (
      <div>


        <h1>Test</h1>

      </div>

    )
  }
}

export default App;`

So, when I refresh my browser, I have an error message : "Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app)."

Can anyone help me ? It's been a week now that I'm looking for a solution by myself.

I'm a beginner in React and at the moment I try to connect my first app to a Firebase database.

I have two files for that. The first, is a config.js file where all the information about the database are stored, like this:

`export default {
    apiKey: "***",
    authDomain: "***",
    databaseURL: "***",
    projectId: "***",
    storageBucket: "***",
    messagingSenderId: "***"
  };`

And my other file, App.js:

`import React, { Component } from 'react';
import './App.css';

//Firebase
import * as firebase from 'firebase';
import config from 'firebase';


class App extends Component {
constructor () {
    super()

    this.state = { loading: true }
    firebase.initializeApp(config)
  }

  componentWillMount () {
    const capsRef = firebase.database().ref('Capsules')

    capsRef.on('value', snapshot => {
      this.setState({
        Capsules: snapshot.val(),
        loading: false
      })
    })
  }

  render () {
    if (this.state.loading) {
      return (
        <p>Je suis en train de charger.</p>
      )
    }

    const capsRef = Object.keys(this.state.tweets).map(key => {
      return <p key={key}>{this.state.Capsules[key].designation}</p>
    })

    return (
      <div>


        <h1>Test</h1>

      </div>

    )
  }
}

export default App;`

So, when I refresh my browser, I have an error message : "Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app)."

Can anyone help me ? It's been a week now that I'm looking for a solution by myself.

• javascript
• reactjs
• firebase

• Can you show your config file? – Colin Ricardo Commented Jul 4, 2018 at 10:50
• Hello Collin, thank a lot for your help ! In my config file, I just have my database information write exactly like in my first post. – LittleBigBoy Commented Jul 4, 2018 at 11:48
• You'll need to somehow make sure that initializeApp is called only once. – Doug Stevenson Commented Jul 4, 2018 at 17:32

5 Answers 5

Hard to tell without seeing your code, but you could try:

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

in your config file.

Here is a full example with Firebase 9 / Modular using TypeScript. Just use initializeAppIfNecessary() to get access to the app. If you want to make this even cleaner, extract this out to a file called firebase.ts and export this function