Vuefire error when reading a non-empty collection from firebase

[PeterKassenaar]

Reproduction

I'm new to Vuefire, followed the steps in the Getting Started Guide.

I have a collection of cities in my firebase project that I want to fetch and show in the component.

If I use the code as described, the browser throws an error:

vuefire.esm.js?0ff2:186 Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at extractRefs (vuefire.esm.js?0ff2:186)
    at Object.added (vuefire.esm.js?0ff2:354)
    at eval (vuefire.esm.js?0ff2:412)
    at Array.forEach (<anonymous>)
    at Array.eval (vuefire.esm.js?0ff2:411)
    at next (index.esm.js?c6c5:16645)
    at eval (index.esm.js?c6c5:13404)

Steps to reproduce the behavior

My package.json

"dependencies": {
    "core-js": "^3.6.5",
    "firebase": "^8.0.2",
    "vue": "^2.6.11",
    "vuefire": "^2.2.4"
  },

My main.js

import Vue from 'vue'
import App from './App.vue'

import {firestorePlugin} from "vuefire";

Vue.config.productionTip = false

Vue.use(firestorePlugin)
new Vue({
  render: h => h(App),
}).$mount('#app')

My db.js

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

const firebaseConfig = {
    apiKey: "xxx",
    authDomain: "xxx",
    databaseURL: "xxx",
    projectId: "xxx",
    storageBucket: "xxx",
    messagingSenderId: "xxx",
    appId: "xxx"
};

// Get a Firestore instance
export const db = firebase
    .initializeApp(firebaseConfig)
    .firestore()

Relevant parts of my Component

<script>
import {db} from "@/db";

export default {
  name: "CityList",
  data() {
    return {
      cities: []
    }
  },
  firestore: {
    cities: db.collection('cities') // <== Throws error if collection not empty
  }
}
</script>

Expected behavior

To be able to retrieve the documents from the collection, loop over them and show in the console.

Actual behavior

If the collection of cities is not empty in Cloud Firestore, the browser throws the error above.

I can add documents to the collection (using db.collection( 'cities').add( { someCity } ), and they do show up in the firebase console, but I'm not able to read them using the code above.

any clues? Maybe an unspotted typo, maybe version differences?

Thanks!

[posva]

Firebase 8 is still not supported, use Firebase 7 until support is released 🙂

[PeterKassenaar]

@posva - Thanks for the quick response! It works now, using firebase 7.

Until Firebase 8 is supported, maybe write a warning in the documentation, as a simple npm install firebase always installs the latest version (which doesn't work)?

Maybe write something like npm install firebase@7

[mfissehaye]

Firebase 8 has been merged here. But the error is still there. I am getting this error with vuexfire.

[posva]

I couldn't reproduce on the example folders in vuefire 2 (3 is for Vue 3 and doesn't have support for firebase 8 yet). So if you manage to edit one of the examples to reproduce, I can take a look. Note vuexfire and vuefire use the same code underneath, so the bug is likely to appear in both

[mfissehaye]

Oh I see. I was suggested to use version 2.3.4 to get the support for firebase 8, but that doesn't seem to be a valid version. The latest is 2.2.5.

[charles-allen]

@mfissehaye - Sorry, my fault. I tried to read the version from the commit log instead of my package.json.

(I believe) 2.2.5 is the correct version of vuefire!

Looks like 2.3.4 is the latest version of vuefire-core, not vuefire.

[mfissehaye]

I am still getting error Uncaught TypeError: Cannot convert undefined or null to object with versions updated.

"vuefire": "^2.2.5",
"vuexfire": "^3.2.5"
Here is the vuexfire code

const currentUser = this.$fire.auth.currentUser
if (currentUser) {
  const uid = currentUser.uid
  const carts = this.$fire.firestore.collection(`users/${uid}/carts`)
  return await context.bindFirestoreRef('carts', carts, { wait: true })
}

Note: I am subscribing to a sub collection.