'No Firebase App '[DEFAULT]' has been created' even though initializeApp is called

Question

I am trying to add Firebase (Firestore) to my Nuxt project, however I am recieving the following error when initialising a const from firebase.firestore() in my index.vue file:

Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).

I have installed Firebase in my project and also the module ( @nuxtjs/firebase ).

My nuxt.config.js file looks like this:

export default {

...

plugins: ['~/plugins/firebase.js'],

components: true,

buildModules: [
    '@nuxt/typescript-build',
    '@nuxtjs/tailwindcss',
],

modules: [],

...

}

And my firebase.js file is within my plugins folder as follows:

import firebase from 'firebase/app'

const config = {
    ...
}

let app = null
if (!firebase.apps.length) {
    app = firebase.initializeApp(config)
}

export default firebase

I've compared the above to other examples online and haven't spotted any issues. However I'm new to everything from Nuxt to Firebase, so I may be missing something obvious. Any suggestions appreciated.

Answer 1

This typically happens if you call initializeApp() more than once on a single firebase app. If you're working with a single firebase db, make sure to initialize it when your app starts.

Answer 2

According to this GitHub Discussion this snippet for firebase.js should work:

import fb from "firebase/app"
export const firebase = !fb.apps.length ? fb.initializeApp(firebaseConfig) : fb.app()

// somecomponent.js
import {firebase} from "../firebase.js"

// do your firebase stuff here

Credit to @Brunocrosier with his post ; even though this snippet isn't case-specific, I decided to include it for the sake of completeness.

---

Besides this thread - generally speaking, Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app). is often a result of of either calling firebase. before initializing via .initializeApp(); or by calling .initializeApp() multiple times ( for example Next.js might try to initialize it on the back- as well as the frontend - which seems to be the case in your code ) within your firebase app.

Hence as a solution I highly suggest to move your initialization to the firebase.js file in order to initialize it directly when your app starts.

---

For further reading purposes:

• The nuxt/firebase documentation
• Error: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp()
• The previously mentioned GitHub Discussion
• FireBase JavaScript documentation

Answer 3

This normally happens when you try to access firestore before initializing the firebase. So as default we can check if firebase is initialized or not by firebase.apps.length but it's not a good practice to initialize firebase each and every time.

so if you are only using firestore then in your plugin you can export firestore directly after initialization like following,

import firebase from 'firebase/app'

const config = {
    ...
}

let app = null
if (!firebase.apps.length) {
    app = firebase.initializeApp(config)
}

export default firebase.firestore()

But since you are working with nuxt there is special nuxt package called firebase/nuxt

with that installed you can define your configuration in nuxt config inside the module section as bellow,

modules: [
    [
      '@nuxtjs/firebase',
      {
        config: {
          apiKey: '<apiKey>',
          authDomain: '<authDomain>',
          databaseURL: '<databaseURL>',
          projectId: '<projectId>',
          storageBucket: '<storageBucket>',
          messagingSenderId: '<messagingSenderId>',
          appId: '<appId>',
          measurementId: '<measurementId>'
        },
        services: {
          auth: true // Just as example. Can be any other service.
        }
      }
    ]
  ],

I think it is a better way to use firebase inside the nuxt.js