Firebase App named '[DEFAULT]' already exists REACT

Question

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.

Answer 1

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

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

in your config file.

Answer 2

This error occurs when you trying to initialize firebase again and again. It should be initialized at once and use to avoid Firebase app named '[DEFAULT]' already exists you have to change your initialization style.

try {
firebase.initializeApp({
apiKey: "FULL_API_KEY_PUT_HERE",
authDomain: "FULL_AUTHDOMAIN_PUT_HERE",
databaseURL: "https://FULL_databaseURL_PUT_HERE.com",
storageBucket: "FULL_storageBucket_PUT_HEREappspot.com",
})
} catch (err) {
// we skip the "already exists" message which is
// not an actual error when we're hot-reloading
if (!/already exists/.test(err.message)) {
console.error('Firebase initialization error raised', err.stack)
}}

Answer 3

The Safe way to Initializing a Firebase App

Before you call the initialize app function, you must to ensure there's no same app that has been initialized before.

How to do that?

Let's try the examples below.

---

Firebase v9 (Modular)

import { initializeApp, getApp } from 'firebase/app'

let fireapp

try {
    fireapp = getApp()
} catch (error) {
    fireapp = initializeApp({
        apiKey: 'xxxx',
        authDomain: 'xxxx',
        databaseURL: 'xxxx',
        projectId: 'xxxx',
        storageBucket: 'xxxx',
        messagingSenderId: 'xxxx',
        appId: 'xxxx',
    })
}

Why we use try/catch block? Because, if getApp function can't find any existing App in the browser, it will throw an error instead of return a undefined value.

---

Firebase v8 (Legacy, Namespaced)

import firebase from 'firebase/app'

if (!firebase.apps.length) {
    firebase.initializeApp({
        apiKey: 'xxxx',
        authDomain: 'xxxx',
        databaseURL: 'xxxx',
        projectId: 'xxxx',
        storageBucket: 'xxxx',
        messagingSenderId: 'xxxx',
        appId: 'xxxx',
    })
}

Answer 4

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 ?

import { initializeApp, getApp } from "firebase/app";

function initializeAppIfNecessary() {
  try {
    return getApp();
  } catch (any) {
    const firebaseConfig = {
      apiKey: "...",
      authDomain: "...",
      projectId: "...",
    };
    return initializeApp(firebaseConfig);
  }
}

const app = initializeAppIfNecessary();