httpsCallable is not defined when using Firebase Cloud Functions

Question

For the past week I've been trying to setup Firebase Cloud Functions, but have been unable to import the dependencies needed.

This is in my script.js file, my main code:

import firebase from "firebase/app"
require("firebase/functions");

const testFunction = httpsCallable(functions, 'testFunction')

That returns this error:

script.js:7 Uncaught ReferenceError: httpsCallable is not defined
    at Object.parcelRequire.script.js.firebase/app (script.js:7)
    at newRequire (script.75da7f30.js:47)
    at script.75da7f30.js:81
    at script.75da7f30.js:120

In my index.html, I have this:

    <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-functions.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-analytics.js"></script>


<script>  
const firebaseConfig = {
    apiKey: "XXXXXXXXXXXX",
    authDomain: "XXXXX-XXXXX.firebaseapp.com",
    databaseURL: "https://XXXXX-XXXXX-default-rtdb.firebaseio.com",
    projectId: "XXXXX-XXXXX",
    storageBucket: "XXXXX-XXXXX.appspot.com",
    messagingSenderId: "XXXXXX",
    appId: "1:XXXXXX:web:XXXXXX"
  };
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
        firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL)
        firebase.analytics()
</script>

What am I missing?

Edit: To upgrade to the new version of Firebase, I removed the script references in my html, did "npm i firebase@9.1.3" in my project folder, moved everything to my script.js file, and this is what it looks like now. But I still get the httpsCallable is not defined error, so the version didn't seem to affect it.

import firebase from "firebase/compat/app"
import 'firebase/compat/functions'
import 'firebase/compat/auth'
import 'firebase/compat/analytics'
import 'firebase/compat/database'

const firebaseConfig = {
    apiKey: "XXXXXXXXXXXX",
    authDomain: "XXXXX-XXXXX.firebaseapp.com",
    databaseURL: "https://XXXXX-XXXXX-default-rtdb.firebaseio.com",
    projectId: "XXXXX-XXXXX",
    storageBucket: "XXXXX-XXXXX.appspot.com",
    messagingSenderId: "XXXXXX",
    appId: "1:XXXXXX:web:XXXXXX"
  };
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL)
firebase.analytics()

Answer 1

When using the legacy namespaced syntax (<v8 & v9 compatibility-mode), use:

import firebase from "firebase/compat/app" // just firebase/app in <v8
import 'firebase/compat/functions'         // just firebase/functions in <v8

const testFunction = firebase.functions().httpsCallable('testFunction')

testFunction({ /* data */ })
  .then((result) => { /* ... */ })
  .catch((err) => { /* ... */ })

For the modern modular syntax (v9+), use:

import { getFunctions, httpsCallable } from 'firebase/functions'

const testFunction = httpsCallable(getFunctions(), 'testFunction')

testFunction({ /* data */ })
  .then((result) => { /* ... */ })
  .catch((err) => { /* ... */ })

These are documented here .