VueJS - Vuefire - TypeError: document.onSnapshot is not a function

Question

I'm trying to implement Vuefire in my project. I'm following the guidelines on the Vuefire site but still get this error.

db.js:

import firebase from 'firebase/app'
import 'firebase/firestore';
const firebaseConfig = {
apiKey: ....,
authDomain: ....,
projectId: ....,
storageBucket: ...,
messagingSenderId:....,
appId: ..."
};
const app = firebase.initializeApp(firebaseConfig)
export const db = app.firestore()

main.js

    import Vue from 'vue';
import App from './App.vue';
import vuetify from './plugins/vuetify';
import { firestorePlugin } from 'vuefire'
import DatetimePicker from 'vuetify-datetime-picker';
Vue.use(firestorePlugin)
Vue.config.productionTip = false;
Vue.use(DatetimePicker)
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app');

App.vue

import { db } from "../db";
export default {
name: "App",
data() {
return {
fireDB: [],
  },
mounted() {

console.log(this.fireDB);
  },
firestore: {
// fireDB: db.collection("something").doc('else').get().then((res) => {
//   console.log(res);
// }) - like this it gives me the error.

//fireDB: db.collection("something") - like this it returns an array with an object that is my database.
  },

};

from the console I see that the 'document' upon which onSnapshot is called is a promise

score 3 · Answer 1 · answered Nov 19 '21 at 01:40

I'm not sure if this is the cause of your problem, but I got the same error when using VuexFire and it was because I had installed the Firebase v9 which has a new API and isn't compatible with Vuefire yet.

You can either try to use the new Firebase v9 API or downgrade to v8 - which is what the example code in the current Viewfire site uses (actually I think it says it's v7 but it works with v8).

To downgrade, check your package.json for the version of Firebase, and ensure it's v8 e.g. "firebase": "^8.10", (and run npm i)

This is the v8 query syntax https://firebase.google.com/docs/firestore/quickstart#web-version-8_4

db.collection("users").get().then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
        console.log(`${doc.id} => ${doc.data()}`);
    });
});

This is the v9 syntax https://firebase.google.com/docs/firestore/quickstart#web-version-9_4

const querySnapshot = await getDocs(collection(db, "users"));
querySnapshot.forEach((doc) => {
  console.log(`${doc.id} => ${doc.data()}`);
});

I found that VuexFire v3.2.5 worked when POSTing new documents to Firebase v9, but I got the onSnapshot error when binding a collection. So I downgraded to Firebase v8 and switched my bindings to the old syntax (as per the Viewfire docs).

There is an Viewfire issue about upgrading which is active (as of Oct 2021) but not complete yet. https://github.com/vuejs/vuefire/issues/1128

STILL correct - vuefire is still not supporting current Vue (3) or Firebase (9) https://stackoverflow.com/a/72172017/1459653 — Mark Gavagan, May 09 '22 at 12:37

VueJS - Vuefire - TypeError: document.onSnapshot is not a function

1 Answers1