How to fix the error of Uncaught ReferenceError: process is not defined

Question

This is my error In index.js Actually I tried to use window.process = {}; on the top of it but it didnt worked and also I tried to put the window.process = {}; on app.js it also didnt worked I dont know how I am getting error pls help me and let me know how to fix the error I am actually creating smart brain app with clarifai AI and I did everything right but I dont know why I am getting the blank screen as an output pls help

[1]: https://i.stack.imgur.com/1U5PV.png

import React from 'react';
    import ReactDOM from 'react-dom/client';
    import './index.css';
    import App from './App';
    import reportWebVitals from './reportWebVitals';
    import 'tachyons';
    
    
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    );
    
    reportWebVitals();

This is my app.js

 import './App.css';
    import ParticlesBackground from './Components/ParticlesBackground/ParticlesBackground';
    import Navigation from './Components/Navigation/Navigation';
    import FaceRecognition from './Components/FaceRecognition/FaceRecognition';
    import Logo from './Components/Logo/Logo'
    import ImageLinkForm from './Components/ImageLinkForm/ImageLinkForm'
    import Rank from './Components/Rank/Rank'
    import { Component } from 'react';
    import Clarifai from 'clarifai';
    
    
    
    const app = new Clarifai.App({
      apiKey: '41f76d4d2e2c4c5b8f6636e3f49737f6'
     });
    
    
    class App extends Component {
    
      constructor(){
        super();
        this.state ={
          input:'',
          imageUrl:'',
        }
      }
       
      onInputChange=(event) =>{
        this.setState({input:event.target.value});
      }
    
      onButtonSumbit =()=>{
        this.setState({imageUrl:this.state.input});
    
        app.models
        .predict(
          Clarifai.FACE_DETECT_MODEL,
          this.state.input)
        .then(response => this.displayFaceBox(this.calculateFaceLocation(response)))
        .catch(err => console.log(err));
    
    
        
      }
    
      render(){
      
      return (
        <div className="App">
        
        
          <Navigation />
    
           <Logo />
           <Rank />
            <ImageLinkForm onInputChange={this.onInputChange} 
              onButtonSumbit={this.onButtonSumbit}/>
          
          <FaceRecognition imageUrl={this.state.imageUrl} /> 
          <ParticlesBackground />
        </div>
      );
    }
    }
    export default App;

I suppose it has something to do with your "Clarifai" library. The error points to line 13, which is the line where you call Clarifai.App. What happens if you remove this call? Still having this issue? — Igor Gonak, May 29 '22 at 09:45
No when I remove it everything was working fine but I saw on Internet that https://github.com/facebook/create-react-app/issues/11773#issuecomment-995720144:partying_face But it is not working with me Or can anybody tell me how to use window.process = {} on the top of index.js — Ahmed, May 29 '22 at 09:46

score 0 · Answer 1 · answered May 29 '22 at 09:49

The problem here is not React, but your used library "Clarifai", which is by the way not maintained any more. The main problem here, is that you can't access the process variable in a front end application.

Plase look into following SO questions for further information:

React & Clarifai: Uncaught ReferenceError: process is not defined

Uncaught ReferenceError: process is not defined

There are many solutions on how to still access process from client side, but it depends on your set up. Please try to make a little research.

How to fix the error of Uncaught ReferenceError: process is not defined

1 Answers1