Firebase Functions not able to use oncall functions in app, returns internal error

Question

Firebase Functions onCall not working

I was recently following the Firebase tutorial series by The Net Ninja YouTube channel.

---

The Net Ninja Firebase Function Playlist

Firebase Functions Tutorial #5 - Callable Functions

---

And I got stuck in the firebase functions part, first I was not even able to deploy them because billing was enabled in my account, then I put the node version in the package.json to '8', it didn't ask for billing when I deployed the functions.

package.json

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "scripts": {
    "lint": "eslint .",
    "serve": "firebase emulators:start --only functions",
    "shell": "firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "8"
  },
  "main": "index.js",
  "dependencies": {
    "firebase-admin": "^8.10.0",
    "firebase-functions": "^3.6.1"
  },
  "devDependencies": {
    "eslint": "^5.12.0",
    "eslint-plugin-promise": "^4.0.1",
    "firebase-functions-test": "^0.2.0"
  },
  "private": true
}

earlier it was "node": "10"

After this, I'm able to deploy the functions and even run an onRequest function, but not the onCall function. Whenever I try to call an onCall function, I don't know what happens, maybe I get an error I'm not sure.

index.js firebase function file

const functions = require('firebase-functions');

exports.randomNumber = functions.https.onRequest((request, response) => {
    const number = Math.round(Math.random() * 100);
    console.log(number);
    response.send(number.toString());
});

exports.sayHello = functions.https.onCall((data, context) => {
    console.log('its running');
    return 'hello, ninjas';
});

The randomNumber runs perfectly, but sayHello never runs or whatever. I'm calling the sayHello function from frontend

app.js my web app's javascript file

//sayHello function call
const button = document.querySelector('.call');
button.addEventListener('click', () => {
    //get firebase function reference
    const sayHello = firebase.functions().httpsCallable('sayHello');
    sayHello().then(result => {
        console.log(result.data);
    }).catch(error => {
        console.log(error);
    });
});

I'm also initializing firebase properly in the index.html

<!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="/__/firebase/7.21.1/firebase-app.js"></script>
    <!-- include only the Firebase features as you need -->
    <script src="/__/firebase/7.21.1/firebase-auth.js"></script>
    <script src="/__/firebase/7.21.1/firebase-firestore.js"></script>
    <script src="/__/firebase/7.21.1/firebase-functions.js"></script>

    <!-- Initialize Firebase -->
    <script src="/__/firebase/init.js"></script>

In the console of my web app, something gets logged

Error: internal
    at new y (error.ts:66)
    at w (error.ts:175)
    at A.<anonymous> (service.ts:245)
    at tslib.es6.js:100
    at Object.next (tslib.es6.js:81)
    at r (tslib.es6.js:71)

Can anyone at least tell what this console log means???

---

Please help, not able to complete the tutorial series after which I'll move on to some real projects, been stuck at this for a week now. Thanks in advance, if can solve my problem.

---

---

Solution found

---

Just downgrade the javascript sdk version you are using in your front end to 7.21.0, that's it, it'll work.

The issue was as stated by @DougStevenson below that Firebase callable functions, at the current time (Oct 2020) is not working with javascript sdk 7.21.1 and 7.22.0.

Cannot invoke HttpsCallable functions anymore after upgrading to firebase 7.22.0

<!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="/__/firebase/7.21.0/firebase-app.js"></script>
    <!-- include only the Firebase features as you need -->
    <script src="/__/firebase/7.21.0/firebase-auth.js"></script>
    <script src="/__/firebase/7.21.0/firebase-firestore.js"></script>
    <script src="/__/firebase/7.21.0/firebase-functions.js"></script>

    <!-- Initialize Firebase -->
    <script src="/__/firebase/init.js"></script>

Answer 1

I have found that callable functions from javascript web clients are broken with SDK version 7.21.1. If you downgrade to 7.21.0, it should work OK. The latest 7.22.0 still seems broken.

This has been filed on GitHub if you want to track it.

Update Oct 5, 2020: Apparently this has been fixed in 7.22.1.