ProjectId not provided in firebase.initializeApp despite being provided

[KayJay89]

Hi all,

I wanted to try out this packages but I can't even seem to get the basic explanation up and running. I am always receiving the below error in the console when trying to run the app, despite having provided the ProjectId in the config.

FirebaseError: "projectId" not provided in firebase.initializeApp.
    e prebuilt-30db9a88-9b75cc8d.js:418
    I_ prebuilt-30db9a88-9b75cc8d.js:14381
    t prebuilt-30db9a88-9b75cc8d.js:14383
    e prebuilt-30db9a88-9b75cc8d.js:16048
    P index.js:69
    P index.js:66
    getOrInitializeService index.esm.js:218
    getImmediate index.esm.js:116
    _getService index.esm.js:220
    componentName index.esm.js:432
    serviceNamespace index.esm.js:412
    initFirebase firebase.js:21
    initFirebase firebase.js:20
    <anonymous> index.js:29
    js app.js:1577
    __webpack_require__ app.js:854
    fn app.js:151
    <anonymous> main.js:15
    js app.js:1529
    __webpack_require__ app.js:854
    fn app.js:151
    1 app.js:1650
    __webpack_require__ app.js:854
    checkDeferredModules app.js:46
    <anonymous> app.js:994
    <anonymous> app.js:997

My config looks basically identical to the one provided in the documentation with exception of the module names:

//store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import VuexEasyFirestore from 'vuex-easy-firestore'

Vue.use(Vuex)

// import from step 1
import { Firebase, initFirebase } from './config/firebase.js'
// import from step 3 (below)
import directions from './modules/directions.js'

// do the magic 🧙🏻‍♂️
const easyFirestore = VuexEasyFirestore([directions], {
  logging: true,
  FirebaseDependency: Firebase
})

// include as PLUGIN in your vuex store
// please note that "myModule" should ONLY be passed via the plugin
const storeData = {
  plugins: [easyFirestore]
  // ... your other store data
}

// initialise Vuex
const store = new Vuex.Store(storeData)

// initFirebase
initFirebase().catch(error => {
  console.log(error)
  // take user to a page stating an error occurred
  // (might be a connection error, or the app is open in another tab)
})

export default store

// ~store/modules/directions.js

const directions = {
  firestorePath: 'directions',
  firestoreRefType: 'collection', // or 'doc'
  moduleName: 'directions',
  statePropName: 'data',
  namespaced: true, // automatically added

  // this object is your store module (will be added as '/directions')
  // you can also add state/getters/mutations/actions
  state: {},
  getters: {},
  mutations: {},
  actions: {}
}

export default directions

// src/store/config/firebase.js

import Firebase from 'firebase/app'
import 'firebase/firestore'

// Initialize Firebase
const firebaseConfig = {
  apiKey: 'XXXXXXXX',
  authDomain: 'XXXXXXXXX',
  projectId: 'XXXXXXX',
  storageBucket: 'XXXXXX',
  messagingSenderId: 'XXXXXX',
  appId: 'XXXXXXX',
  measurementId: 'XXXXXXXXX
}

function initFirebase() {
  Firebase.initializeApp({
    firebaseConfig
  })
  return new Promise((resolve, reject) => {
    Firebase.firestore()
      .enablePersistence()
      .then(resolve)
      .catch(err => {
        if (err.code === 'failed-precondition') {
          reject(err)
          // Multiple tabs open, persistence can only be
          // enabled in one tab at a a time.
        } else if (err.code === 'unimplemented') {
          reject(err)
          // The current browser does not support all of
          // the features required to enable persistence
        }
      })
  })
}

export { Firebase, initFirebase }

Note I deleted the real config strings and replaced with XXX. Works fine without using this package so I know there's nothing wrong with the actual config details provided.

I did have to change the import statement in the firebase.js config file because I was getting another error when applying the one mentioned in the installation guide:

import Firebase from 'firebase/app'

as opposed to

import * as Firebase from 'firebase/app'

If I kept the original import statement the below error would be triggered:

Uncaught TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_1__.initializeApp is not a function
    initFirebase firebase.js:8
    <anonymous> index.js:29
    js app.js:1577
    __webpack_require__ app.js:854
    fn app.js:151
    <anonymous> main.js:15
    js app.js:1529
    __webpack_require__ app.js:854
    fn app.js:151
    1 app.js:1650
    __webpack_require__ app.js:854
    checkDeferredModules app.js:46
    <anonymous> app.js:994
    <anonymous> app.js:997

For completion sake: I used Vue CLI to create my project (Vue 2) and Firebase 8.2.0 installed.

[mesqueeb]

I think you need Firebase.initializeApp(firebaseConfig) as opposed to Firebase.initializeApp({ firebaseConfig }) what you have now... Let me know if it doesn't work! : )

[Yintii]

This is literally the only post about this problem and I am also experiencing this while trying to access firestore. Was there a solution?

[mesqueeb]

The solution is posted on 21 Jan.