Can't get it to work no matter what!

[PhilLovesToCode]

Could someone please help? I've been trying for hours and hours to get vuex-easy-firestore running by exactly following the instructions here: https://mesqueeb.github.io/vuex-easy-firestore/setup.html.

I always get the console error: "Uncaught TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_4__.initializeApp is not a function".

I'm using Vue CLI. In addition to "npm i --save firebase", I've tried using the "@firebase/app" module that Vue CLI finds when I go to install a dependency. But when I try to use that, vuex-easy-firestore throws an error complaining that "firebase.auth" is not a function.

Could someone please provide instructions that explain the right way to do this for a Vue CLI application? Thanks!

[mesqueeb]

I think Firebase recently did a breaking update where you need to change the way you import the Firebase library.

Try this:

import Firebase from 'firebase/app'

Instead of this:

import * as Firebase from 'firebase/app'

[PhilLovesToCode]

Thanks for your reply. That gets us past the error above, but now it complains: [Vue warn]: Error in created hook: "Error: Your API key is invalid, please check you have copied it correctly." I cut and pasted the config block from the Firebase console, and have re-checked it many times. The error throws the very first time I try to read data from one of my Vuex modules. Is there a newly-introduced incompatibility between vuex-easy-firestore and firebase/auth?

[mesqueeb]

@PhilLovesToCode You need to pass your firebase dependency to vuex-easy-firestore. Are you doing that?

const easyFirestore = VuexEasyFirestore(
  [myModule],
  {logging: true, FirebaseDependency: Firebase}
)

[PhilLovesToCode]

Yes.

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

Vue.use(Vuex)

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

// Import modules
import { dogsModule }     from './modules/dogs.js'
import { catsModule }       from './modules/cats.js'
import { monkeysModule } from './modules/monkeys.js'

// Your web app's Firebase configuration
// (Actual values redacted)
const firebaseConfig = {
    apiKey: "...",
    authDomain: "...",
    projectId: "...",
    storageBucket: "...",
    messagingSenderId: "...",
    appId: "..."
}

const initFirebase = function() {
    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
                }
            })
    })
}

const userId = 'baBFTmOFawGZFTM1vvuJ'

const dogs = dogsModule(userId)
const cats   = catsModule(userId)
const monkeys = monkeysModule(userId)

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

// Include easyFirestore as PLUGIN in your vuex store.
// Please note that modules should ONLY be passed via the plugin.

const storeData = {
    plugins: [easyFirestore],
    // ... your other store data
}

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

// Initialize Firebase.
initFirebase()
    .catch(error => {
        // take user to a page stating an error occurred
        // (might be a connection error, or the app is open in another tab)
        console.info('store/index: Error initializing Firebase: ', error)
    })

export default store

[mesqueeb]

@PhilLovesToCode it's not

Firebase.initializeApp({ firebaseConfig })

but it's

Firebase.initializeApp(firebaseConfig)

:)

feel free to open another issue if you have any other new problems! Good luck!!

_{--
Vuex Easy Firestore was made with ♥ by Luca Ban.
If you use this library in your projects, you can support the maintenance of this library by a small contribution via Github 💜.
You can also reach out on twitter if you want a one-on-one coding review/lesson. 🦜}

[PhilLovesToCode]

That solved it! Thanks!