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

Last updated on June 11, 2021 The Frog Loading... Post a comment

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 for 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 solved 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:

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

Related Articles

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x