Fixing The ‘FirebaseApp name already exists!’ Error

Summary

The web content provides solutions for preventing the 'FirebaseApp name already exists!' error when hot reloading in Firebase app development.

Abstract

The article addresses a common issue faced by developers using Firebase with hot reloading, where the Firebase app attempts to reinitialize with each code save, leading to an error. The author notes the absence of built-in or documented solutions for this problem in Firebase. To resolve the issue, the author suggests checking if a Firebase app is already initialized before initializing a new one. For Firebase Web versions up to v8, a conditional check on firebase.apps.length is recommended. For the modular Firebase Web v9, the author advises using getApps() to check for existing apps and initializeApp() if necessary, and also suggests storing the initialized app in a variable for use with other Firebase functions. The author concludes by expressing hope that the provided solutions will be useful to others encountering the same problem.

Opinions

The author expresses surprise that a solution for the 'FirebaseApp name already exists!' error is not built into Firebase or documented.
It is implied that ignoring the error is possible but not ideal.
The author endorses the use of Firebase Web v9 for its modular approach, which improves build size and efficiency.
The author indicates a personal preference for storing the initialized Firebase app in a variable, suggesting it may be a best practice for working with Firebase functions in v9.
The article serves as a self-reference for the author in the future, indicating a practical, problem-solving approach to development challenges.

Fixing The ‘FirebaseApp name already exists!’ Error

To be honest, I have no idea why this is not inbuilt in Firebase, or even documented in the Firebase. But if you’re ever developing a Firebase app with hot reloading — every time you save — your code will try to re-initialize Firebase again, resulting in the following error;

FirebaseApp name [DEFAULT] already exists!

Now, technically you can simply ignore this error and forge ahead, but if you want to, here’s a way to prevent this double initializing from happening.

import * as firebase from 'firebase/app'

if ( !firebase.apps.length ) firebase.initializeApp( config )

Essentially, it is checking if there is already a firebase app running and only initializing if there isn’t one. This works if you’re using Firebase Web v8 and below.

If you’re using Firebase Web v9 — which is highly recommended as it introduces a modular approach, allowing you to reduce the build size and efficiency — then you’ll need to tweak the code slightly.

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

if ( !getApps().length ) initializeApp( config )

As there is no longer a default firebase call, you’ll have to import getApps() first to check for any existing Firebase apps.

I’ve also realized that the new Web v9 sometimes requires you to store the initialized app into a variable so that it can be called or dropped into other Firebase functions. This is how I’ve been doing it.

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

const app = !getApps().length ? initializeApp( config ) : getApp()

If there is no initialized app, I’ll initialize it and store it into an app variable. Otherwise, I’ll use getApp() to get the initialized app instance and store it.

As always, I’m noting all these down as a reference to myself in the future, but I hope it helps someone who faced the same issue. Cheers!