ReferenceError: process is not defined error [Solved]

# 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.

Copied!
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.

Copied!
node index.js

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

Copied!
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.

Copied!
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.

Copied!
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.

Copied!
# 👇️ with NPM
npm install react-scripts@latest --force


# --------------------------------------------

# 👇️ with YARN
yarn add react-scripts@latest

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.

Copied!
# 👇️ 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.

Copied!
{
  "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.

Copied!
# 👇️  (macOS/Linux) delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json
rm -f yarn.lock

# 👇️ clean your npm cache
npm cache clean --force

# 👇️ install packages
npm install

If you are on Windows, issue the following commands.

Copied!
# 👇️  (Windows) delete node_modules and package-lock.json
rd /s /q "node_modules"
del package-lock.json
del -f yarn.lock

# 👇️ clean your 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.

Copied!
{
  "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.

Copied!
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.