1

So, I'm working on a React project which uses Firebase to achieve lots of functionalities. And now I'm trying to use some HTTPS callable functions in it.

But it seems like the way I import the 'firebase/functions' module is not correct. And it's giving me this error:

TypeError: Cannot read property 'httpsCallable' of undefined

Below is how I do the import and set up:

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

const config = {
   // the config info here
};

  class Firebase {
    constructor() {
      app.initializeApp(config);
      this.auth = app.auth();
      this.db = app.firestore();
      this.functions = app.functions();
    }

    // trying to call the function
    doCreatePlanner = this.functions.httpsCallable('createPlanner')

Can anyone point me to the right direction?

Ashely Shu
  • 13
  • 6

1 Answers1

2

You are trying to access this.functions before you defined it in the constructor. To get rid of the error message, you could move the call to httpsCallable into the constructor:

    constructor() {
      app.initializeApp(config);
      this.auth = app.auth();
      this.db = app.firestore();
      this.functions = app.functions();
      const doCreatePlanner = this.functions.httpsCallable('createPlanner')
    }

This is probably not exactly what you want to do, but in any event, you can't use this.functions until after you define it.

Doug Stevenson
  • 297,357
  • 32
  • 422
  • 441
  • Thanks Doug! Your advice works for me. But I am still a little confused. Can you take a look at the updated question? It's too long to put in comment – Ashely Shu Aug 05 '20 at 14:34
  • If you have additional questions, they should be posted separately instead of adding on to the original. Changing the nature of the question effectively invalidates the given answer, and is not helpful for others in the future. – Doug Stevenson Aug 05 '20 at 15:04
  • True. My bad. I'll create another question. – Ashely Shu Aug 05 '20 at 15:26