4

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

Afaq Ahmed Khan
  • 2,164
  • 2
  • 29
  • 39

2 Answers2

6

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
1

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 (vuefire@2.2.5) 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 (vuefire@3.0.0-alpha.2) was also published "a year ago" (around May 2021) and it "currently supports Firebase 7. Support for Firebase 8 is on the way."

Mark Gavagan
  • 878
  • 12
  • 45