How to fix “ReferenceError: process is not defined” in React

ReferenceError: process is not defined. It seems that this is a mistake that quite a few people make when running the application. The main reason is react-error-overlay package’s dependencies have been upgraded to support webpack v5, and it is no longer compatible with react-script v4. What we need to do is upgrade the packages.

What causes the ReferenceError: process is not defined in React?

Uncaught ReferenceError: process is not defined
at Object.<anonymous> (index.js:6)

This error is a response of react-error-overlay. This package’s dependencies have been upgraded to support webpack v5, and it is no longer compatible with react-script v4.

For example, webpack v5 removed access to environment variables using the process.env.MY_ENV_VAR syntax (with MY_ENV_VAR as your environment variable).

How to fix this error?

Upgrade react-scripts package

Open your project and run the following command:

npm i react-scripts@latest

If it doesn’t work, try to install react-error-overlay package 6.0.9

In package.json, add:

"resolutions": {
    "react-error-overlay": "6.0.9"
},
"devDependencies":{
    "react-error-overlay": "6.0.9",
...
}

And run:

npm install

Use webpack plugin

This is a rarely used way because, typically, we will use CRA to create new applications.

npm install -D process

Go to the webpack configuration file and add the following code:

plugins: [
      new webpack.ProvidePlugin({
             process: 'process/browser',
      }),
  ],

Summary

If ReferenceError: process is not defined is still present, you try removing package.json and reinstalling the dependencies again. Hope the above solutions will help you. If you have any questions, please feel free to let me know.

Leave a Reply

Your email address will not be published. Required fields are marked *