'React Uncaught ReferenceError: process is not defined

I am getting issues with iframe. Till today everything was working as expected. Today I added a very simple Modal component and somehow iframe started appearing. It appears when I am editing the file and hot reload is done. Also with this issue, it's showing an error in Console as "Uncaught ReferenceError: process is not defined". Can someone please help me with this?

import React, {useEffect} from 'react';
import ReactDOM from "react-dom";
import Close from "../static/assets/close-white.svg"

const trapStyles = {
    position: 'absolute',
    opacity: 0
}
const Test = () => {

    return ReactDOM.createPortal(
        <div data-react-modal-body-trap="" tabIndex="0" style={trapStyles}/>,
        document.getElementById("app")
    )
}

const Modal = ({ open, onClose, children }) => {

    useEffect(() => {

        if (open)document.getElementById("app").classList.add("ReactModal__Body--open");

        return () => {
            document.getElementById("app").classList.remove("ReactModal__Body--open")
        }
    })
    if (!open) return null

    return ReactDOM.createPortal(
        <>
            <Test />
            <div className="ReactModal__Overlay--after-open">
                <div className="modal-form-page"
                     tabIndex="-1" role="dialog" aria-modal="true">
                    <button onClick={onClose} className="close-modal">
                        <img id="close-button" alt="close" src={Close}/>
                    </button>
                    { children }
                </div>
            </div>
        </>,
        document.getElementById("ModalPortal")
    )
};

export default Modal;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <link href="%PUBLIC_URL%/favicon.ico" rel="icon"/>
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta content="#000000" name="theme-color"/>
    <link href="%PUBLIC_URL%/logo192.png" rel="apple-touch-icon"/>
    <link href="%PUBLIC_URL%/manifest.json" rel="manifest"/>
    <title>React App</title>
</head>
<body id="app">
<noscript>You need to enable javascript to run this website</noscript>
<div id="content">
<-- All other content render here -->
</div>
<div class="ReactModalPortal" id="ModalPortal"></div>
</body>
</html>

Uncaught ReferenceError: process is not defined
    at Object.4043 (<anonymous>:2:13168)
    at r (<anonymous>:2:306599)
    at Object.8048 (<anonymous>:2:9496)
    at r (<anonymous>:2:306599)
    at Object.8641 (<anonymous>:2:1379)
    at r (<anonymous>:2:306599)
    at <anonymous>:2:315627
    at <anonymous>:2:324225
    at <anonymous>:2:324229
    at HTMLIFrameElement.e.onload (index.js:1)
4043 @ VM128:2
r @ VM128:2
8048 @ VM128:2
r @ VM128:2
8641 @ VM128:2
r @ VM128:2
(anonymous) @ VM128:2
(anonymous) @ VM128:2
(anonymous) @ VM128:2
e.onload @ index.js:1
be @ index.js:1
he @ index.js:1
tryDismissErrorOverlay @ webpackHotDevClient.js:184
onHotUpdateSuccess @ webpackHotDevClient.js:109
handleApplyUpdates @ webpackHotDevClient.js:257
(anonymous) @ webpackHotDevClient.js:273
load (async)
be @ index.js:1
he @ index.js:1
tryDismissErrorOverlay @ webpackHotDevClient.js:184
onHotUpdateSuccess @ webpackHotDevClient.js:109
handleApplyUpdates @ webpackHotDevClient.js:257
(anonymous) @ webpackHotDevClient.js:273
Promise.then (async)
tryApplyUpdates @ webpackHotDevClient.js:271
handleSuccess @ webpackHotDevClient.js:106
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:203

reactjs

Solution 1:^[1]

Upgrading to react-scripts v5 is not always the solution.

The full reason for this bug is described here. In short here is a brief summary:

The error is as a result of react-error-overlay (which many people would never have heard of because it is a dependency of react-scripts). This package's dependencies were update to support webpack v5, which unfortunately is not compatible with react-scripts v4.

Method 1

If upgrading to react-scripts v5 is not working for you, you can also try another workaround which is to pin react-error-overlay to version 6.0.9:

Delete your yarn.lock or package-lock.json, then install your dependencies again.

yarn

yarn will take the resolutions field into consideration out of the box.

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

For yarn workspaces, place the above resolution in the root package.json, not in the problematic folder. See this issue comment.

npm (>=v8.3.0)

The equivalent of resolutions for npm is overrides.

"overrides": {
  "react-error-overlay": "6.0.9"
},

npm (<8.3.0)

You need to make sure npm uses the resolutions field when you run npm install. To automate the installation, see this answer

Method 2

Yet another (not so popular) workaround is to use a webpack plugin:

plugins:[
  new webpack.DefinePlugin({
      process: {env: {}}
  })
]

If you use craco, you just need to modify your craco.config.js file to add that plugin:

{
  ...
  webpack: {
    plugins: {
      add: [
        new webpack.DefinePlugin({
          process: {env: {}}
        })
      ]
    }
  }
}

For customize-cra users, see this answer or this github comment.

This last method is not popular because not many CRA users ever have to touch webpack directly to work with react.

Solution 2:^[2]

I tried updating react-scripts to 5.0.0, but that didn't work.

Solution: -

If you are using npm: -

npm i -D [email protected]

If you are using yarn: -

yarn add -D [email protected]

Solution 3:^[3]

Add this code in package.json

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

After that run npm install command. It worked for me after 2 days of scrolling on the internet.

Solution 4:^[4]

Until a fix is final(maybe this PR), for anyone using npm(not yarn) the solution is this:

add to package.json:

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

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

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

and then do an

npm install

Solution 5:^[5]

The issue was solved by updating react-scripts to 5.0.0

Solution 6:^[6]

I found the best solution.

The problem is because you lose window.process variable when React hotloads, and process exists only on node, not the browser.

So you should inject it to browser when the app loads.

Add this line to App.js

useEffect(() => {
    window.process = {
      ...window.process,
    };
  }, []);

Solution 7:^[7]

A lot of answers suggest overriding the react-error-overlay to 6.0.9, but this didn't work for me (on February 11th, 2022). I was using react-scripts 5.0.0 and react-error-overlay 6.0.10 before trying out the overlay override.

Instead of going through the hastle of defining the webpack configuration in my CRA application (as suggested by smac89), I downgraded react-scripts to 4.0.3.

It works fine with react-scripts: 4.0.3, which resolved react-error-overlay to 6.0.10.

So, my fix is:

Set "react-scripts": "4.0.3" in package.json
Delete your lock file (yarn.lock or package-lock.json) and node_modules
Run install

Solution 8:^[8]

If you are using npm > v8.3 you can use overrides like so in your package.json.

  "overrides": {
    "react-error-overlay": "6.0.9"
  },

For more information about overrides, go here.

The issue is a breaking change in 6.0.10, some dependencies like react-dev-utils will install this version even if you pin the version of react-error-overlay to 6.0.9 that is why it is necessary to use overrides.

Solution 9:^[9]

For these who are using create-react-app with customize-cra you can use the Method 2 solution from @smac89 with addWebpackPlugin, this works for me.

react-scripts: 5.0.0 webpack: 5.64.4

// config-overrides.js
const webpack = require('webpack');
const { override, addWebpackPlugin } = require('customize-cra');

module.exports = override(
  addWebpackPlugin(
    new webpack.DefinePlugin({
      process: { env: {} },
    })
  )
);

this solution throws a warning on npm start but the application compiles right.

WARNING in DefinePlugin
Conflicting values for 'process.env'

This warning didn't brake anything but if anyone knows how to fix it please answer this thread :)

Solution 10:^[10]

in yarn.lock or package-lock.json file to find string

"react-error-overlay@npm:^6.0.9":
  version: 6.0.10 <-- here problem
  etc...

and replace to

react-error-overlay@^6.0.9:
  version "6.0.9"
  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
  integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==

saved file and run yarn install

Solution 11:^[11]

For those still having issues with this: If using Webpack, run npm install -D dotenv-webpack and if using typescript npm install -D @types/dotenv-webpack.
Then in your Webpack config, add import Dotenv from "dotenv-webpack"; And

...
plugins: [
    ...
    new Dotenv(),
],
...

See https://github.com/mrsteele/dotenv-webpack/blob/master/README.md

After trying everything else, this finally worked for me.

Solution 12:^[12]

Upgrading from react-scripts 4.0.3 to 5.0.0 worked for me.

I ended up with the following error (relevant if you're using craco):

TypeError: match.loader.options.plugins is not a function

This was solved by @weiwei in their answer here

Solution 13:^[13]

Facing the same issue today (14th feb 22) using Docker containers for a ReactJS app and I solved it downgrading the react-scripts version to 4.0.3 and also installing react-error-overlay on version 6.0.9. So the steps were:

Remove the package-lock.json file
Into the package.json file
1. Replace the dependency "react-scripts": "4.0.3"
2. Add react-error-overlay into the dev dependencies with "react-error-overlay": "6.0.9"
Update npm: npm update

I hope it helps anybody to save some time, Cheers.

Solution 14:^[14]

Upgrading react-scripts from v4 to "react-scripts": "^5.0.0", seem helped me

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2
Solution 3	Vijay
Solution 4	smac89
Solution 5	Ruli
Solution 6	Nagibaba
Solution 7
Solution 8	jfunk
Solution 9	Rafael Stone
Solution 10	Dmitry Egorov
Solution 11	Kaleb Teixeira
Solution 12	Christopher White
Solution 13	David
Solution 14	atazmin

'React Uncaught ReferenceError: process is not defined

Solution 1:[1]

Method 1

yarn

npm (>=v8.3.0)

npm (<8.3.0)

Method 2

Solution 2:[2]

Solution: -

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]