Importing firebase cloud functions in a React project

Question

I am building a react app (this part might be inconsequential) and have a server cloud function built:

exports.myFunction = functions.https.onCall(async (data, context) => {
  ...
}

I know that calling this in my client would normally consist of calling

firebase.functions().httpsCallable('myFunction');

And I have tried this in a separate project, and it works. However, that was using a script tag to import the functions module in my index.html:

<script src="/__/firebase/7.7.9/firebase-functions.js"></script>

but in my current project, my modules are imported in my firebase.js source:

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: ...
  ...
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

I wasn't able to find any example code for importing functions this way, and everything I have tried has failed.

How can I import functions so that I can invoke the above method? Even better, how could I figure this out on my own? (I have been relying on example code so far). I assume that these are referencing the NPM packages I have npm install'ed (or in my case, yarn add'ed), but I don't immediately see where the code is actually being referenced so I can work this out on my own.

let me know if below recommendation was helpful. – Vaidehi Jamankar Feb 03 '23 at 08:17 — Vaidehi Jamankar, Feb 03 '23 at 08:17

score 0 · Accepted Answer · answered Feb 01 '23 at 13:22

As far what I have understood from you question it is regarding how can firebase cloud function module be imported while using a react app which is calling a HTTPS callable function at the client side.You can use any library or built-in command of your environment to call a HTTPS function.

I would recommend you to try the following to your imports and see if that works.
import { getFunctions, httpsCallable } from "firebase/functions";
OR
import * as functions from 'firebase-functions'; import React from 'react'; import { renderToString } from 'react-dom/server'; import App from './src/App';

Check the below for similar implementation examples to better understand this and implement according to your requirements.

Importing firebase cloud functions in a React project

1 Answers1