Hawkar Shwany
Hawkar Shwany

Reputation: 333

[Vue warn]: Error in v-on handler: "TypeError: Object(...)(...).httpsCallable(...).then is not a function"

I'm trying to call this firebase cloud functions from my Vue app

exports.sayHi = functions.https.onCall((data, context) =>{
  return "hi";
});

This is my action in the store

import {
  getFirebaseDB,
  getFirebaseFunctions,
} from "../../helpers/firebase/authUtils";

reserveApt() {
    getFirebaseFunctions()
      .httpsCallable("sayHi")
      .then((result) => {
        console.log(result);
      });
  },

and this is my helper functions in ../../helpers/firebase/authUtils:

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

/**
 * Initilize the backend
 * @param {*} config
 */
const initFirebaseBackend = (config) => {
  if (!_fireBaseBackend) {
    _fireBaseBackend = new FirebaseAuthBackend(config);
    _db = firebase.firestore();
    _functions = firebase.functions();
  }
  return _fireBaseBackend;
};


/**
 * Returns the firebase backend
 */
const getFirebaseBackend = () => {
  return _fireBaseBackend;
};


/**
 * returns firestore db
 */
const getFirebaseDB = () => {
  if (!_db) {
    _db = firebase.firestore();
  }
  return _db;
};


/**
 * returns firebase functions
 */
const getFirebaseFunctions = () => {
  if (!_functions) {
    _functions = firebase.functions();
  }
  return _functions;
};


export {
  initFirebaseBackend,
  getFirebaseBackend,
  getFirebaseDB,
  getFirebaseFunctions,
};

Firebase is properly initialized and all the other functions like auth and firestore work perfectly but when I call this I get this error:

[Vue warn]: Error in v-on handler: "TypeError: Object(...)(...).httpsCallable(...).then is not a function"

found in

---> <Properties> at src/views/pages/property/properties.vue
       <App> at src/App.vue
         <Root>

Upvotes: 3

Views: 260

Answers (1)

Hawkar Shwany
Hawkar Shwany

Reputation: 333

So apparently the problem was in calling the function. I had to call it like this:

var reserve = getFirebaseFunctions().httpsCallable("sayHi");
    reserve().then((result) => {
      console.log(result);
    });

but I'm not sure why!!

Upvotes: 1

Related Questions