The variable 'httpsCallable' is not recognized within the context of Firebase Cloud Functions

Over the past week, I've been encountering difficulties setting up Firebase Cloud Functions as I struggle to import the necessary dependencies.

Within my script.js file, here is the main code snippet:

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

const testFunction = httpsCallable(functions, 'testFunction')

This results in the following 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 file, I have included the following scripts:

    <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 could be missing in this setup?

Edit: In an attempt to upgrade to the latest Firebase version, I eliminated script references in my HTML, executed "npm i [email protected]" in my project directory, consolidated everything into my script.js file. Despite these changes, the issue persists with the error message mentioning that httpsCallable is undefined, suggesting that the version update did not resolve 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 utilizing the old namespaced structure (in compatibility mode for versions 8 and 9), remember to:

import firebase from "firebase/compat/app" // only firebase/app in version 8
import 'firebase/compat/functions'         // only firebase/functions in version 8

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

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

If you are using the modern modular syntax (version 9 and higher), follow this pattern:

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

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

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

You can find more information about these approaches here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring Json parsing in Python with Django

I am currently using Django for my web application. I am facing an issue where I cannot access Nodes and edges by calling decoded_data['nodes']. Instead, I am encountering the error message: 'NoneType' object is not subscriptable Thi ...

Utilizing Vue.js pagination and table sorting with Element components

I am currently working on a project using Vue js, Element Plus Table, and Pagination. The issue I am facing is that all columns of the table are sortable, but the sorting only works on the current page. I need to be able to sort all my data across multiple ...

What are some ways to get Angular2 up and running in a newly created distribution directory?

Trying to setup my own Angular2+Typescript (+SystemJS+Gulp4) starter project has hit a roadblock for me. I encountered issues when transitioning from compiling TypeScript in the same folder as JavaScript with access to the node_modules folder, to organizin ...

How to Utilize Activity Methods in WebChromeClient

I am currently working on developing an Android application using Xamarin. One feature of the app involves a webview that needs to load upon the app's creation. Once the webview is fully loaded, I need to trigger some JavaScript code within the HTML p ...

Transforming vanilla JavaScript into jQuery

Is there a more efficient way to write this code using jQuery? It's functioning properly in Firefox but not in Safari or Chrome without any error messages, making it difficult for me to troubleshoot. Any suggestions or insights would be greatly appre ...

Tips for conducting a simultaneous test on several devices

Struggling to execute a single test script on multiple devices, regardless of efforts. There is one test apk and script obtained from a website as a sample. The script locates a textbox in the application, enters "Hello World!" into it, then completes the ...

Implementing AngularJS in a parent controller to pass directive element attributes

Looking to configure my directive module via app level controllers. Check out Plunker index.html <div ng-controller="App"> <foodz index="index"></foodz> </div> app.js angular.module('app', ['foodz']). con ...

How can I show a title when redirecting a URL in VUE JS?

My current setup includes a navigation drawer component that changes the title based on the user's route. For example, when navigating to the home page (e.g. "/"), the title updates to "Home", and when navigating to the profile page (e.g. /profile), t ...

Can a JavaScript string be converted into a date format for insertion into a SQL database?

I'm currently developing a bot and facing an issue where I need to make it upload two dates. However, the arguments it can have are numbers within strings. For example, I have two strings '08222020' and '10282022,' which I need to ...

Adding a simulated $state object to an angular unit test

I'm facing some challenges with Angular unit testing as I am not very proficient in it. Specifically, I am struggling to set up a simple unit test. Here is my Class: class CampaignController { constructor($state) { this.$state = $state; ...

Metero retrieves information from two collections by matching their respective ids

In my database, I have two collections: one contains User Profiles and the other contains User Friends. The User Friends collection has an array called "friends" which stores the friends of a particular user. The relationship between these two collection ...

When the Protractor function is invoked from a Cucumber step definition, it mysteriously returns undefined, despite the fact that the console.log()

Currently, I am in the process of developing an Automation Framework using Protractor-cucumber for the organization I work for. The framework includes several libraries that play crucial roles in its functionality: Protractor Cucumber-js Gulp Chai Chai-a ...

What is the correct method for combining curved lines to create a single geometry?

I need to optimize performance by combining thousands of sparsely arranged curved lines created with CubicBezierCurve3 into one geometry. Is there a way to feed them all into a single THREE.Line without the interconnected segments appearing connected? Or ...

Can you tell me the JavaScript alternative to Jquery's .load() shortcut method?

Exploring the modernized version of jquery, specifically the .load() ajax shorthand method that is not deprecated. One example to consider is finding the javascript equivalent for the traditional jquery ajax shorthand method mentioned below: $("#targetdi ...

Trigger an event click once a bootstrap table has been successfully reloaded

In my function, I have an AJAX call and in the success function, I refresh the Bootstrap table. After the refresh, there is a trigger command that I want to execute only when the refresh is completed. How can I achieve that? success: function (result) { c ...

Using jQuery to extract the value of 'selectedValue' from RadDropDownList

My goal is clearly stated in the title. Within my '#dropdown' control, the value currently looks like this: value="{"enabled":true,"logEntries":[],"selectedIndex":8,"selectedText":"Option2","selectedValue":"250"}" I am specifically interested ...

Converting PHP variables to JavaScript variables: A step-by-step guide

I'm trying to figure out the most efficient method for retrieving PHP variables using AJAX and then transforming them into JavaScript variables. Imagine I have the following code in my PHP file: echo $total; echo $actual; Edit: JSON echo json_enco ...

What is the best way to adjust the size of an SVG path when zooming in Highcharts?

Recently, I developed a module that allows users to draw an svg line over a highchart using the Renderer. However, I encountered an issue where the size and position of the drawn line remain static when the user zooms into the highchart. It is essentia ...

Creating a visually appealing pie chart using data from a specific database field is simpler than you think!

In the table field, I have 3 categories: "not yet, currently, done". https://i.sstatic.net/bPXRz.png My goal is to create a pie chart. This is the model code snippet: public function select_by_status() { $sql = "SELECT COUNT(status_laporan) AS ...

javascript accessing all data in firebase real-time database using JavaScript the right way

Working with node.js, I am retrieving data from the firebase real-time database. However, the data is being returned in the following format: Data Retrieval Code import firebaseApp from '../config.js'; import { getDatabase, ref, onValue } from & ...