Error: You need to pass auth instance to use gRPC-fallback client in browser or other non-Node.js environments

Question

I'm trying to set google application credentials using the following command set GOOGLE_APPLICATION_CREDENTIALS=KEY_PATH(I replaced KEY_PATH with the path of the JSON file that contains my service account key).

When I run this command

gcloud auth application-default print-access-token everything works fine.

But I get this error on the browser

Error: {"servicePath":"vision.googleapis.com","port":443,"clientConfig":{},"fallback":true}You need to pass auth instance to use gRPC-fallback client in browser or other non-Node.js environments. Use OAuth2Client from google-auth-library.

This is the file where I use vision:

import React, { useEffect, useRef } from "react";
import Webcam from "react-webcam";
      
      const Home = () => {
          // Get a reference to the Cloud Vision API component
const Vision = require('@google-cloud/vision');
const vision = new Vision.ImageAnnotatorClient();

        const webcamRef = React.useRef(null);
        const [imgSrc, setImgSrc] = React.useState(null);
      
        const capture = React.useCallback(() => {
          const imageSrc = webcamRef.current.getScreenshot();

          let text;
    vision.textDetection(imageSrc)
        .then(([detections]) => {
            const annotation = detections.textAnnotations[0];
            text = annotation ? annotation.description : '';
            console.log(`Extracted text: ${text}`);
            console.log(`Extracted text from image (${text.length} chars)`);
        }).catch(vis_err => {
            console.error("Vision error:" , vis_err);
        });
          setImgSrc(imageSrc);
        }, [webcamRef, setImgSrc]);
      
        return (
            <>
              <Webcam
                audio={false}
                ref={webcamRef}
                screenshotFormat="image/jpeg"
              />
              <button onClick={capture}>Capture photo</button>
              {imgSrc && (
                <img
                  src={imgSrc}
                />
              )}
            </>
          );
        };
export default Home

Could anyone explain why this is happening and how it could be solved? Any help would be appreciated!

Answer 1

This issue was closed on Github a while back:

this library is supposed to be used from a server-side Node.js application, not from any front-end environment such as a browser, Electron app, React, (name your front-end framework here). If you just run the code by plain regular Node.js, it will work.Having said that - we do have experimental support for a browser use case starting from the latest version, which is 0.11.0. It's experimental (just implemented) and not really documented yet. You can try using it though. To do that, you need to pass an authenticated instance of OAuth2Client (from google-auth-library) as an auth parameter of the client constructor

Here is the link: https://github.com/googleapis/nodejs-dialogflow/issues/405#issuecomment-529713296