How to Implement Google Cloud Vision Api to React Application

Question

I am trying to connect my node.js Google Cloud Vision API with my react application that I've created, but I'm running into several errors compiling when I run npm start. In particular, several modules are missing including: 'fs', 'https', 'querystring', 'url', 'childprocess', 'os', etc. When I run the Vision.js in Node.js only it runs perfectly fine, but when I run it alongside with react there are compilation errors.

Some Error Messages:

Message 1:

ERROR in ./node_modules/@google-cloud/vision/build/src/helpers.js 24:11-24

Module not found: Error: Can't resolve 'fs' in 'C:\Users\alvin\OneDrive\Desktop\googlecloud\project\node_modules\@google-cloud\vision\build\src'

Message 2:

ERROR in ./node_modules/gaxios/build/src/gaxios.js 27:16-32
        
 Module not found: Error: Can't resolve 'https' in 'C:\Users\alvin\OneDrive\Desktop\googlecloud\project\node_modules\gaxios\build\src'
    
    BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
    This is no longer the case. Verify if you need this module and configure a polyfill for it.

Vision.js (Node js code for Google Cloud Api)

import React, { useEffect, useState } from 'react'
const vision = require('@google-cloud/vision');
const { JWT } = require('google-auth-library');

const Vision = () => {

    const [dict, setDict] = useState({});
    const [answer, setAnswer] = useState("");
    const fileName = "./image.jpg"
    const keys = require('./oauth2.keys.json');
    const client = new vision.ImageAnnotatorClient();

    useEffect(() => {
        authVision();
        // rankEmotions();
    }, []);

    const authVision = async () => {
        const client = new JWT({
            email: keys.client_email,
            key: keys.private_key,
            scopes: ['https://www.googleapis.com/auth/cloud-platform'],
        });
        const url = `https://dns.googleapis.com/dns/v1/projects/${keys.project_id}`;
        const res = await client.request({ url });
        console.log(res.data);
    }

    const detectFaces = async () => {

        const result = await client.faceDetection(fileName);
        const faces = await result.faceAnnotations;
        console.log('Faces:');
        faces.forEach((face, i) => {
            console.log(`  Face #${i + 1}:`);
            console.log(`    Joy: ${face.joyLikelihood}`);
            console.log(`    Anger: ${face.angerLikelihood}`);
            console.log(`    Sorrow: ${face.sorrowLikelihood}`);
            console.log(`    Surprise: ${face.surpriseLikelihood}`);
            setDict({
                joy: `${face.joyLikelihood}`,
                anger: `${face.angerLikelihood}`,
                sorrow: `${face.sorrowLikelihood}`,
                surprise: `${face.surpriseLikelihood}`
            });
        });
    }

    const rankEmotions = () => {
        for (var key in dict) {
            if (dict[key] === "VERY_LIKELY") {
                setAnswer(key);
            }
        }
        // setAnswer("IMAGE NOT FOUND");
    }

    return (
        <div>
            <h1>
                {answer}
            </h1>
        </div>
    )
}

export default Vision

App.js (React Code)

import './App.css';
import SongsList from './components/SongsList';
import Vision from './components/Vision';


function App() {
  return (
    <div className="App">
      <Vision />
    </div>
  );
}

export default App;