ReferenceError: process is not defined error [Solved]

avatar
Borislav Hadzhiev

Last updated: Jan 15, 2023
3 min

banner

# Uncaught ReferenceError: process is not defined

The "ReferenceError: process is not defined" occurs when we try to access the process variable in the browser, in an environment in which it's not defined.

uncaught referenceerror process is not defined

shell
Uncaught ReferenceError: process is not defined

# Running a Node.js script

If you meant to run your code in Node.js, use the node yourFile.js command instead.

For example, if my file is named index.js, I'd run node index.js from my terminal.

shell
node index.js

running node js file

The contents of the index.js file may be as simple as the following.

index.js
console.log(process.env); console.log(process.env.HOME);

The command assumes that your file is called index.js and you opened your terminal in the same directory as the index.js file.

# If you have a Webpack configuration

The process global variable is only available in Node.js or in a browser environment in which it is injected (using a tool like Webpack), e.g. React.js.

If you use Webpack to inject the process variable into a frontend project, your webpack.config.js will look something similar to the following.

webpack.config.js
module.exports = { plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV), // ... }), ], };

You can then access the process global variable as follows.

index.js
console.log(process.env); console.log(process.env.NODE_ENV); if(process.env.NODE_ENV === 'production'){ console.log('App running in production mode'); }

# Solving the error in a React.js project

To solve the error in React, update the version of your react-scripts package by running npm install react-scripts@latest.

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 --force # -------------------------------------------- # ๐Ÿ‘‡๏ธ with YARN yarn add react-scripts@latest

install react scripts latest version

If you use React.js, the error is most likely 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.

# Try installing version 6.0.9 of react-error-overlay

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 --force # -------------------------------------------- # ๐Ÿ‘‡๏ธ 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" } }

# Delete your node_modules and reinstall your dependencies

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.

If you are on macOS or Linux, issue the following commands.

shell
# ๐Ÿ‘‡๏ธ (macOS/Linux) 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 # ๐Ÿ‘‡๏ธ install packages npm install

If you are on Windows, issue the following commands.

shell
# ๐Ÿ‘‡๏ธ (Windows) delete node_modules and package-lock.json rd /s /q "node_modules" del package-lock.json del -f yarn.lock # ๐Ÿ‘‡๏ธ clean npm cache npm cache clean --force # ๐Ÿ‘‡๏ธ install packages 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.

# Update your NPM packages to the latest version

If the error persists, you can try to update all your NPM packages to the latest version.

If you want to update all packages in your project to the latest version, use the npm-check-updates package.

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

You can add your package.json file to version control (e.g. git) because the following 2 commands will update the versions of your packages in your package.json file.
shell
npx npm-check-updates -u npm install --legacy-peer-deps

The commands update all package versions in your package.json file to the latest version and install the packages.

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.

Copyright ยฉ 2024 Borislav Hadzhiev