React: Firebase App named ‘[DEFAULT]’ already exists

When developing a React application with the Firebase package, I ran into the following error:

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

More information I got from my console:

Uncaught FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).
    at initializeApp (firebaseNamespaceCore.ts:153)
    at Object.push../node_modules/@firebase/app/dist/index.esm.js.firebase.initializeApp (index.ts:66)
    at App (App.js:24)
    at renderWithHooks (react-dom.development.js:14985)
    at mountIndeterminateComponent (react-dom.development.js:17811)
    at beginWork (react-dom.development.js:19049)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at scheduleUpdateOnFiber (react-dom.development.js:21881)
    at updateContainer (react-dom.development.js:25482)
    at react-dom.development.js:26021
    at unbatchedUpdates (react-dom.development.js:22431)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:26020)
    at Object.render (react-dom.development.js:26103)
    at Module.<anonymous> (index.js:8)
    at Module../src/index.js (index.js:10)
    at __webpack_require__ (bootstrap:851)
    at fn (bootstrap:150)
    at Object.1 (HomePage.js:203)
    at __webpack_require__ (bootstrap:851)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

If you face the same error as mine, don’t worry. The reason why the error occurs is that the firebase.initializeApp() method has run more than one time. Note that this behavior can happen even if you put firebase.initializeApp() in one place. For example:

const App = () => {
  firebase.initializeApp(firebaseConfig); // This will cause error
  /* ... */
}

Solutions

Below are 2 solutions to solve the problem.

1. Only call firebase.initializeApp() after checking that it is not initialized, like this:

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

2. We can put firebase.initializeApp outside the root component of the app, like this:

// App.js
import React from "react";

import firebase from "firebase/app";

const firebaseConfig = 
  /* Your config here */
};

firebase.initializeApp(firebaseConfig);

const App = () => {
  /* ... */
}

App is the root component of my project.

Final Words

We’ve tackled a problem that may occur when working with React and Firebase. Using these two together saves us a lot of time and effort when doing tasks related to authentication, analytics, etc. If you’d like to explore more new and interesting stuff about React and React Native, take a look at the following articles:

• React + Material-UI: Create Dark/Light Theme Toggle
• React: Using inline styles with the calc() function
• How to Create a Word Counter in React (with Hooks)
• React & TypeScript: Using useRef hook example
• Most popular React Component UI Libraries
• How to render HTML content in React Native

You can also check our React topic page and React Native topic page for the latest tutorials and examples.