I recently encountered an issue in my Vue.js 3 app with the following code snippet in my main.js file:
import { createApp } from "vue";
import App from "./App.vue";
import { firestorePlugin } from "vuefire";
const app = createApp(App);
app.use(firestorePlugin);
app.mount("#app");
It seems that using app.use(firestorePlugin); is causing errors. Without it, everything renders perfectly fine, but with it, I receive the following error message:
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
On clicking the error, it reveals this specific line where it mentions 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];
};
Additionally, here are my Firebase configurations stored 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 assistance or guidance on resolving this issue would be greatly appreciated. Please feel free to reach out if you require any further information. Thank you!