使用 Firebase Cloud Functions 時未定義 httpsCallable

Question

在過去的一周里，我一直在嘗試設置 Firebase Cloud Functions，但無法導入所需的依賴項。

這是在我的 script.js 文件中，我的主要代碼：

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

const testFunction = httpsCallable(functions, 'testFunction')

這將返回此錯誤：

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

在我的 index.html 中，我有這個：

    <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>

我錯過了什么？

編輯：為了升級到新版本的 Firebase，我刪除了我的 html 中的腳本引用，在我的項目文件夾中做了“npm i firebase@9.1.3”，將所有內容移到我的 script.js 文件中，這就是它的樣子像現在。 但我仍然得到 httpsCallable is not defined 錯誤，所以版本似乎沒有影響它。

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

使用舊的命名空間語法（<v8 & v9 兼容模式）時，請使用：

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) => { /* ... */ })

對於現代模塊化語法 (v9+)，請使用：

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

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

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

這些都記錄在這里。