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

dev-bjoern · 2021-12-16T00:00:16Z

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?

The text was updated successfully, but these errors were encountered:

raix · 2021-12-16T00:09:12Z

Is it fixed if updating to react-scripts v5?

dev-bjoern · 2021-12-16T00:12:26Z

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 · 2021-12-16T03:17:15Z

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 · 2021-12-16T05:04:50Z

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 · 2021-12-16T06:22:21Z

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

LinYenCheng · 2021-12-16T09:56:55Z

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 · 2021-12-16T10:28:21Z

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 · 2021-12-16T10:54:57Z

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 · 2021-12-16T10:58:10Z

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 · 2021-12-16T11:02:53Z

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 · 2021-12-16T12:01:46Z

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 · 2021-12-16T12:53:57Z

icame here for same reason ...

saad696 · 2021-12-16T13:08:22Z

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?

Fosol · 2021-12-16T13:58:33Z

In my case I have not created an iframe, but one of the dependencies has created one. Not much I can do about that.

saad696 · 2021-12-16T14:00:34Z

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.

where you also using tailwind?

Fosol · 2021-12-16T14:01:18Z

No the dependency that has an iframe I believe is keycloak-js

saad696 · 2021-12-16T14:04:23Z

but i dont have that dependency still im getting iframe

No the dependency that has an iframe I believe is keycloak-js

Fosol · 2021-12-16T14:07:06Z

Hmm, I wonder if react-scripts or something else is creating an iframe too.

vipul2774 · 2021-12-16T14:07:52Z

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.

where you also using tailwind?

No i am not using tailwind.

saad696 · 2021-12-16T14:08:49Z

Hmm, I wonder if react-scripts or something else is creating an iframe too.

you guys using eslint?

mitroo · 2021-12-16T14:10:33Z

Hmm, I wonder if react-scripts or something else is creating an iframe too.

As #11773 reports, the problem seems to be related to react-error-overlay. Upgrade to 5.0.0 fixes the issue for me, but I'm affected by the breaking changes.

Fosol · 2021-12-16T14:10:48Z

eslint is part of react-scripts I believe

saad696 · 2021-12-16T14:17:44Z

Hmm, I wonder if react-scripts or something else is creating an iframe too.

As #11773 reports, the problem seems to be related to react-error-overlay. Upgrade to 5.0.0 fixes the issue for me, but I'm affected by the breaking changes.

I tried too updating react-scripts to 5.0.0 but as im using craco to create my builds and to compile so idk im getting an error you can check it here any help would be appreciated

saad696 · 2021-12-16T14:22:55Z

but if you just delete that iframe from inspect element in chrome that doesn't appears back again until you do a hot reload while if you make changes in code and it re-renders at that time that iframe doesn't appears

Fosol · 2021-12-16T14:34:19Z

I've posted what I believe should have this bug, however it's blocked by another more serious websocket issue I'm seeing in react-scripts 5.0.0.

https://github.com/Fosol/bug-hot-reload

raix · 2021-12-16T15:08:40Z

CRA v5 now use the error overlay in webpack
I think the process error is due to us updating the react-error-overlay package build to wp5 - so a regression we need to fix.

Cc @iansu

flint002 · 2021-12-16T16:48:09Z

my problem is
ionic start myApp blank --type=react
ionic start myApp tabs --type react

from this https://ionicframework.com/docs/react/quickstart igot error for 14 hours -_-

`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)

after 14 hours i try this
ionic start aa my-first-app --type react
problem solved

maybe help other people who stuck on ionic Starter Templates

saybe · 2022-03-15T14:56:46Z

Hey guys, i just changed my "react-scripts" and "react" deps versions to
"react": "^16.13.1"
"react-scripts": "3.4.1"
then deleted node_modules and yarn.lock, reinstalled all deps using yarn.
And its works.

developerasun · 2022-03-18T03:56:19Z

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

yepp getting exact the same response when I had to downgrade react-scripts from 5.0.0 to 4.0.3 to connect Metamask with React/TS(to avoid polyfill issue caused).

for example hot reload with sass is working and showing result in browser, but page becomes unresponsive.

KalebTeixeira · 2022-03-18T09:01:33Z

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.

This updates react-scripts in the genreated starter app from create-app in order to resolve the react-error-overlay issue that was preventing hot reloading from working. References: - facebook/create-react-app#11771 - https://stackoverflow.com/a/70452191/656011

This updates react-scripts in the various starter apps in order to resolve an issue with hot reloading while working locally. References: - facebook/create-react-app#11771 - https://stackoverflow.com/a/70452191/656011

This updates react-scripts in the various starter apps in order to resolve an issue with hot reloading while working locally. These changes include: - update react-scripts to v5; upgrade react to v18 - update yarn.lock after version changes - increment package versions in changeset References: - facebook/create-react-app#11771 - https://stackoverflow.com/a/70452191/656011

zakeerms · 2022-04-27T17:53:13Z

I just solve that issue. npm i -D [email protected] and it works perfect

this worked perfect for me 👍

refer to github issue: facebook/create-react-app#11771

ranjithrb · 2022-06-11T17:17:41Z

I just solve that issue. npm i -D [email protected] and it works perfect

Worked perfectly with "react-scripts": "4.0.3",

Thanks 🚀

idangut · 2022-07-11T16:13:32Z

In my case, the app works just fine in local but when i deploy the app in Azure (app service) the error keeps showing in the console, leavin the app unresponsive.

If anyone knows how to fix that problem when in production, i'd appreciate the help.. Thanks

bdrazen · 2022-07-13T01:07:04Z

[email protected] unfreezes the UI, but the hot reload no longer kicks in at all for me.

refer to github issue: facebook/create-react-app#11771

dev-hbc · 2022-09-16T00:14:49Z

-        "react": "^17.0.2",
+       "react": "^18.0.0", 
-        "react-dom": "^17.0.2",
+        "react-dom": "^18.0.0",
-        "react-scripts": "^4.0.3",
+        "react-scripts": "5.0.0",

I passbyed this problem by upgrading some of the main dependencies.

faridsh69 · 2022-11-22T16:47:18Z

For developers that can not fix it, there is a simple solution that can help you get rid o freezing situation

body > iframe[style*="2147483647"]:not([id="webpack-dev-server-client-overlay"]) { display: none; }

## Problem CRA의 react-scripts 에서 발생하는 이슈로, react-error-overlay 의 내부 로직 변경 후 발생한 버그로 인함 ## Solve 해당 이슈가 해결된 react-scripts 최신 버전으로 업그레이드 진행 참고: [link](facebook/create-react-app#11771 (comment))

Idrees9321 · 2023-07-13T07:48:02Z

tell me one solution please

atanu20 · 2023-09-24T11:21:23Z

npm i -D [email protected] it works for me

HassanTariqueARMUP · 2023-11-28T10:35:27Z

For developers that can not fix it, there is a simple solution that can help you get rid o freezing situation

body > iframe[style*="2147483647"]:not([id="webpack-dev-server-client-overlay"]) { display: none; }

Worked for me as well. Thanks @faridsh69

dev-bjoern added issue: bug report needs triage labels Dec 16, 2021

saad696 mentioned this issue Dec 16, 2021

UnhandledPromiseRejectionWarning: TypeError: match.loader.options.plugins is not a function #11777

Open

ericrallen mentioned this issue Mar 30, 2022

chore: update react-scripts to v5 DataDog/apps#126

Merged

2 tasks

fspoettel mentioned this issue Apr 8, 2022

fix: downgrade react-error-overlay to 6.0.9 to fix HMR forensic-architecture/timemap#241

Merged

iansu added the issue: bug label Apr 12, 2022

ACatThatPrograms mentioned this issue May 6, 2022

CRA / WebPack5 ugly iframe patch alicenet/wallet#121

Merged

devongovett mentioned this issue May 28, 2022

update react-error-overlay to avoid unnecessary process polyfill parcel-bundler/parcel#8158

Closed

3 tasks

shayneczyzewski mentioned this issue Jun 2, 2022

Fix unresponsive UI on server reload wasp-lang/wasp#621

Merged

5 tasks

targeral pushed a commit to web-infra-dev/modern.js that referenced this issue Jun 10, 2022

fix: hot module reload for react app throwing exception (#517)

cd613c1

refer to github issue: facebook/create-react-app#11771

targeral pushed a commit to web-infra-dev/modern.js that referenced this issue Jun 10, 2022

fix: hot module reload for react app throwing exception (#517)

92b079e

refer to github issue: facebook/create-react-app#11771

targeral pushed a commit to web-infra-dev/modern.js that referenced this issue Jun 10, 2022

fix: hot module reload for react app throwing exception (#517)

10e1a64

refer to github issue: facebook/create-react-app#11771

targeral pushed a commit to web-infra-dev/modern.js that referenced this issue Jul 15, 2022

fix: hot module reload for react app throwing exception (#517)

a5225f9

refer to github issue: facebook/create-react-app#11771

TomAFrench mentioned this issue Aug 12, 2022

Force react-error-overlay to 6.0.9 to fix error actualbudget/actual#163

Merged

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

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

Comments

dev-bjoern commented Dec 16, 2021 • edited Loading

raix commented Dec 16, 2021

dev-bjoern commented Dec 16, 2021 • edited Loading

dev-bjoern commented Dec 16, 2021 • edited Loading

Fosol commented Dec 16, 2021 • edited Loading

raix commented Dec 16, 2021

LinYenCheng commented Dec 16, 2021 • edited Loading

zanderisrael commented Dec 16, 2021

dev-bjoern commented Dec 16, 2021 • edited Loading

saad696 commented Dec 16, 2021

saad696 commented Dec 16, 2021

vipul2774 commented Dec 16, 2021

flint002 commented Dec 16, 2021

saad696 commented Dec 16, 2021

Fosol commented Dec 16, 2021

saad696 commented Dec 16, 2021

Fosol commented Dec 16, 2021

saad696 commented Dec 16, 2021

Fosol commented Dec 16, 2021

vipul2774 commented Dec 16, 2021

saad696 commented Dec 16, 2021

mitroo commented Dec 16, 2021

Fosol commented Dec 16, 2021

saad696 commented Dec 16, 2021

saad696 commented Dec 16, 2021

Fosol commented Dec 16, 2021

raix commented Dec 16, 2021

flint002 commented Dec 16, 2021 • edited Loading

saybe commented Mar 15, 2022 • edited Loading

developerasun commented Mar 18, 2022

KalebTeixeira commented Mar 18, 2022 • edited Loading

zakeerms commented Apr 27, 2022

ranjithrb commented Jun 11, 2022

idangut commented Jul 11, 2022

bdrazen commented Jul 13, 2022

dev-hbc commented Sep 16, 2022

faridsh69 commented Nov 22, 2022

Idrees9321 commented Jul 13, 2023

atanu20 commented Sep 24, 2023 • edited Loading

HassanTariqueARMUP commented Nov 28, 2023

dev-bjoern commented Dec 16, 2021 •

edited

Loading

dev-bjoern commented Dec 16, 2021 •

edited

Loading

dev-bjoern commented Dec 16, 2021 •

edited

Loading

Fosol commented Dec 16, 2021 •

edited

Loading

LinYenCheng commented Dec 16, 2021 •

edited

Loading

dev-bjoern commented Dec 16, 2021 •

edited

Loading

flint002 commented Dec 16, 2021 •

edited

Loading

saybe commented Mar 15, 2022 •

edited

Loading

KalebTeixeira commented Mar 18, 2022 •

edited

Loading

atanu20 commented Sep 24, 2023 •

edited

Loading