How to import Firebase SDK into React Front-end-CodePudding

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:

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);
});

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,};
    });

CodePudding user response：

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.

CodePudding user response：

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