Vuejs 3 createApp using firestorePlugin from vuefire getting Uncaught TypeError: Cannot set property '$unbind' of undefined and no render

Question

in my vuejs3 app I'm having this simple code in my main.js

import { createApp } from "vue";
import App from "./App.vue";
import { firestorePlugin } from "vuefire";

const app = createApp(App);

app.use(firestorePlugin);



app.mount("#app");

maybe I'm not using app.use(firestorePlugin); correctly. if I don't do this everything renders perfectly but with this I get this error

vuefire.esm.js?0ff2:619 Uncaught TypeError: Cannot set property '$unbind' of undefined
    at firestorePlugin (vuefire.esm.js?0ff2:619)
    at Object.use (runtime-core.esm-bundler.js?5c40:2949)
    at eval (main.js?56d7:9)
    at Module../src/main.js (app.js:1021)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at Object.1 (app.js:1034)
    at __webpack_require__ (app.js:849)
    at checkDeferredModules (app.js:46)
    at app.js:925

and upon clicking it appears like this where it says Uncaught TypeError: Cannot set property '$unbind' of undefined

 Vue.prototype[unbindName] = function firestoreUnbind(key, reset) {
        this._firestoreUnbinds[key](reset);
        delete this._firestoreUnbinds[key];
        delete this.$firestoreRefs[key];
    };

my firebase configs in firebase.js

import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth";
import "firebase/storage";

const firebaseConfig = {
  apiKey: xxxxxxxxxxxxxxxxxxxxxxxx,
  authDomain: xxxxxxxxxxxxxxxxxxxxxxxx,
  projectId: xxxxxxxxxxxxxxxxxxxxxxxx,
  storageBucket: xxxxxxxxxxxxxxxxxxxxxxxx,
  messagingSenderId: xxxxxxxxxxxxxxxxxxxxxxxx,
  appId: xxxxxxxxxxxxxxxxxxxxxxxx,
};
firebase.initializeApp(firebaseConfig);

export const db = firebase.firestore();
export const auth = firebase.auth();
export const storage = firebase.storage();

any help is appreciated. If there is anything needed please let me know

Answer 1

In the main page https://vuefire.vuejs.org/ you find this note :

Note: This version currently supports Vue 2 and Firebase 7. Support for Vue 3 / Composition API and Firebase 8 is on the way.

so try to uninstall the current veriosn and install the next version :

 npm install vuefire@next firebase@next

Answer 2

There does not appear to be any updated version of Vuefire that supports current versions of Vue (3) or Firebase (9), despite an answer here advising "uninstall the current version and install the next version."

The latest stable version ([email protected]) was published "a year ago" (May 2021) and, as the Feb 2021 answer here indicates, the main page of https://vuefire.vuejs.org/ reads:

"This version currently supports Vue 2 and Firebase 7. Support for Vue 3 / Composition API and Firebase 8 is on the way."

The alpha version ([email protected]) was also published "a year ago" (around May 2021) and it "currently supports Firebase 7. Support for Firebase 8 is on the way."