Solve - React ReferenceError: process is not defined

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Check out my new book

Solve - React ReferenceError: process is not defined #

To solve the "Uncaught ReferenceError: process is not defined" in React, open your terminal in your project's root directory and update the version of your react-scripts package by running npm install react-scripts@latest and re-install your dependencies if necessary.

Open your terminal in your project's root (where your package.json file is) directory and run the following command.

shell
# 👇️ with NPM npm install react-scripts@latest # -------------------------------------------- # 👇️ with YARN yarn add react-scripts@latest
The error is caused by the react-error-overlay package which has dependencies that were updated to support webpack v5 and are not compatible with react-scripts v4.

If the error is not resolved, try installing the 6.0.9 version of the react-error-overlay package.

shell
# 👇️ with NPM npm install --save-dev react-error-overlay@6.0.9 # -------------------------------------------- # 👇️ with YARN yarn add react-error-overlay@6.0.9 --dev

We added version 6.0.9 of the react-error-overlay package as a development dependency.

Now open your package.json file and add the following resolutions object.

package.json
{ "resolutions": { "//": "See https://github.com/facebook/create-react-app/issues/11773", "react-error-overlay": "6.0.9" } }

If the error is not resolved, try to delete your node_modules and package-lock.json (or yarn.lock) files, re-run npm install and restart your IDE.

shell
# 👇️ delete node_modules and package-lock.json rm -rf node_modules rm -f package-lock.json rm -f yarn.lock # 👇️ clean npm cache npm cache clean --force npm install

Yarn will automatically resolve the react-error-overlay package to version 6.0.9.

However, if you use npm and the error persists, add the following preinstall script to your package.json file.

package.json
{ "scripts":{ "preinstall": "npx npm-force-resolutions", } }

The npm-force-resolutions package modifies your package-lock.json file to force the installation of a specific version of a transitive dependency.

For our purposes, we want to make sure we are always installing version 6.0.9 of the react-error-overlay package.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.