v5 Regression react-error-overlay build - Uncaught ReferenceError: process is not defined

[dev-bjoern]

I use following command to start: npm run start

Then, whenever I save a file, I get the following "Uncaught ReferenceError: process is not defined" error in the browser console.

VM27:2 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 @ VM27:2
r @ VM27:2
8048 @ VM27:2
r @ VM27:2
8641 @ VM27:2
r @ VM27:2
(anonymous) @ VM27:2
(anonymous) @ VM27:2
(anonymous) @ VM27:2
e.onload @ index.js:1
be @ index.js:1
he @ index.js:1
tryDismissErrorOverlay @ webpackHotDevClient.js:184
onSuccessfulHotUpdate @ webpackHotDevClient.js:150
handleApplyUpdates @ webpackHotDevClient.js:257
(anonymous) @ webpackHotDevClient.js:276
load (async)
be @ index.js:1
he @ index.js:1
tryDismissErrorOverlay @ webpackHotDevClient.js:184
onSuccessfulHotUpdate @ webpackHotDevClient.js:150
handleApplyUpdates @ webpackHotDevClient.js:257
(anonymous) @ webpackHotDevClient.js:276
Promise.then (async)
tryApplyUpdates @ webpackHotDevClient.js:271
handleWarnings @ webpackHotDevClient.js:147
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:210

react-scripts 4.0.3
npm 6.14.8
node v14.18.1
FreeBSD 12.2-RELEASE-p4 GENERIC amd64

The project compiles just fine, but the hot reloading seems to be erroring.

I have no problem with react-scripts 3

Isnt process a node environment variable? How does it end up in the browser?

[raix]

Is it fixed if updating to react-scripts v5?

[dev-bjoern]

Unfortunately I am facing a different issue with the websocket connection not using wss but ws even though I use https, thus the browser refusing to connect the websocket, in v5... So I cant test v5 at this time.

[dev-bjoern]

Is installing old versions of cra, e.g. 4.0.3 via package.json and npm install, installing webpack 5 now too? I read that process is no longer defined with webpack 5.

[Fosol]

I see the same error with these dependencies.

node: 16.10.0
npm: 7.24.0
react-scripts: 5.0.0

Hot reload continues to work, but the page becomes unresponsive. Can't click or do anything unless you do a manual refresh.

Uncaught ReferenceError: process is not defined
    4043 blank line 66162 > injectedScript:2
    r blank line 66162 > injectedScript:2
    8048 blank line 66162 > injectedScript:2
    r blank line 66162 > injectedScript:2
    8641 blank line 66162 > injectedScript:2
    r blank line 66162 > injectedScript:2
    <anonymous> blank line 66162 > injectedScript:2
    <anonymous> blank line 66162 > injectedScript:2
    <anonymous> blank line 66162 > injectedScript:2
    onload index.js:1
    be index.js:1
    he index.js:1
    tryDismissErrorOverlay webpackHotDevClient.js:184
    onHotUpdateSuccess webpackHotDevClient.js:109
    handleApplyUpdates webpackHotDevClient.js:257
    tryApplyUpdates webpackHotDevClient.js:273
    promise callback*tryApplyUpdates webpackHotDevClient.js:271
    handleSuccess webpackHotDevClient.js:106
    onmessage webpackHotDevClient.js:203
    js webpackHotDevClient.js:195
    Webpack 7

[raix]

Does 'rm -rf node_modules' and then npm/yarn install resolve the issue?

[LinYenCheng]

Hot reload continues to work, but the page becomes unresponsive. Can't click or do anything unless you do a manual refresh.

I had similar error after doing npx rimraf ./**/node_modules and npm install.

The dependencies:

node: 14.17.1
npm: 6.14.13
react-scripts: 4.0.3

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 

[zanderisrael]

same here... Hot reload continues to work, but the page becomes unresponsive. Can't click or do anything unless you do a manual refresh.

[dev-bjoern]

same here... Hot reload continues to work, but the page becomes unresponsive. Can't click or do anything unless you do a manual refresh.

This also happened for me sometimes. Whenever that happens and I inspect the page or any elements, everything is in an iframe containing javascript.

[saad696]

actually yes exactly same is happening with me im not sure what this issue is cause by if any one know what's causing this help out! im using react js

same here...
Hot reload continues to work, but the page becomes unresponsive. Can't click or do anything unless you do a manual refresh.

[saad696]

same here... Hot reload continues to work, but the page becomes unresponsive. Can't click or do anything unless you do a manual refresh.

This also happened for me sometimes. Whenever that happens and I inspect the page or any elements, everything is in an iframe containing javascript.

yes and when you delete that iframe from elements/DOM then it all works fine

[vipul2774]

same here... Hot reload continues to work, but the page becomes unresponsive. Can't click or do anything unless you do a manual refresh.

I also had the same issue. It adds iframe overlay that's why I was not able to click on page. Updating to react-scripts to 5.0.0 solved my issue.

[flint002]

icame here for same reason ...

[saad696]

same here... Hot reload continues to work, but the page becomes unresponsive. Can't click or do anything unless you do a manual refresh.

I also had the same issue. It adds iframe overlay that's why I was not able to click on page. Updating to react-scripts to 5.0.0 solved my issue.

i did that but now its giving me new error while doing npm start TypeError: match.loader.options.plugins is not a function
btw im using craco to build the app any one knows what is happening?