Question 119649 in Firebase Question posted in
An extensive official documentation can be found here.

How to import Firebase SDK into React Front-end

I want to call my HTTP callable functions in my front-end but cannot import firebase properly. I tried reading the firebase documentation but am still confused.

My questions:

  1. Do I need to import the firebase SDK in my front-end to gain access to my deployed firebase functions?

Front-end code:

import "../App.css";
import React, { useState } from "react";
import { getFunctions, httpsCallable } from 
     "firebase/functions";    
const functions = require("firebase/functions");

export default function Navbar() {

const getViewCount = 
    firebase.functions().httpsCallable("getViewCount");
    getViewCount().then((result) => {
console.log(result.data);
});
  1. If so, how do I do that? (The site is already hosted on firebase). If not, what am I missing here?

Here is my Firebase functions code from the backend:

 exports.getViewCount = functions
 .runWith({ secrets: ["YOUTUBE_API"] })
 .https.onCall(async (data, context) => {
  const youtube = google.youtube({
  version: "v3",
  auth: process.env.YOUTUBE_API,});
  
  const { count } = await youtube.channels.list({
  id: process.env.YOUTUBE_CHANNEL_ID,
  part: "statistics",});
   const viewCount = count.items[0].statistics.viewCount;
   return {
  count: viewCount,};
    });
Tags:

2

Answers


  1. 0

    As mentioned by @Konrad it should be firebase/function.

    Based on your attached Error Message it says Module not found: Error: Can't resolve 'firebase-function'. Because you’re entering a wrong syntax.

    You need to add the Firebase products that you want to use (i.e. the Cloud Functions for Firebase Client SDK), as follows:

    // Firebase App (the core Firebase SDK) is always required and must be listed first
import * as firebase from "firebase/app";

// Add the Firebase products that you want to use
import "firebase/functions";

    You can check this doc here ("Using module bundlers" tab) and Firebase services for web.

    Login or Signup to reply.
  2. 0

    I would check your tsconfig file to see what you are targeting. If you used the create-react-app it defaults to es5 and you’ll get the module not found errors

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search