React & Clarifai: Uncaught ReferenceError: process is not defined

Question

I am build a React app using the face detect model from the Clarifai API. When I import Clarifai from "clarifai", I'm prompted with this warning by VS Code:

Could not find a declaration file for module 'clarifai'. '.../face-recognition/node_modules/clarifai/dist/index.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/clarifai` if it exists or add a new declaration (.d.ts) file containing `declare module 'clarifai';`ts(7016)

I tried the suggested solution, but only got errors:

npm i --save-dev @types/clarifai
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2fclarifai - Not found
npm ERR! 404
npm ERR! 404  '@types/clarifai@*' is not in this registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

When I run npm start, I get a blank screen, check the console, and given this error:

Uncaught ReferenceError: process is not defined
    _init App.js:124
    App App.js:53
    js App.js:14
    factory react refresh:6

The first two go back to the clarifai folder installed in the node_modules folder. The third is my "import Clarifai" code.

Is there an issue with the way the API client is installed, or something wrong on my end?

Thanks for the help!

Answer 1

there's many things going on here:

• It looks like you're using a deprecated package (https://github.com/Clarifai/clarifai-javascript). We have deprecated this package back in 2020. If you're exclusively using the package client side, we recommend using REST endpoints directly. See "Javascript (REST)" snippets in the docs: https://docs.clarifai.com/api-guide/predict/images#via-url
• You're getting process is not defined because a client-side application cannot access the process function natively. If you're using webpack, you pass it on with the DefinePlugin package (Uncaught ReferenceError: process is not defined). There's also other ways to access process client-side, I invite to google a bit on it

Let me know if that helped.

Answer 2

//Create a new file in the src folder and in it put up the following block of code

declare module "clarifai";