Is this the bug of react-error-overlay?

[Emiya0306]

Describe the bug

When I change the code and emit the hot-reload, there is iframe cover the whole page and report Uncaught ReferenceError: process is not defined.

Did you try recovering your dependencies?

Yes. It wasn't happened before I recover my dependencies.
After I recover my dependencies(remove node_module / package-lock.json and reinstall the dependencies), the problem has been there.

Which terms did you search for in User Guide?

Uncaught ReferenceError: process is not defined
hot-reload
webpackHotDevClient
"win32"===process.platform

Environment

Environment Info:

current version of create-react-app: 4.0.3
running from /Users/xxx/.config/yarn/global/node_modules/create-react-app

System:
OS: macOS Mojave 10.14.3
CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
Binaries:
Node: 11.6.0 - /usr/local/bin/node
Yarn: 1.22.17 - /usr/local/bin/yarn
npm: 6.5.0 - /usr/local/bin/npm
Browsers:
Chrome: 96.0.4664.110
Edge: Not Found
Firefox: 94.0.2
Safari: 12.0.3
npmPackages:
react: 16.12.0 => 16.12.0
react-dom: 16.12.0 => 16.12.0
react-scripts: ^4.0.3 => 4.0.3
npmGlobalPackages:
create-react-app: Not Found

(paste the output of the command here.)

Steps to reproduce

1. Reinstall the node_modules.
2. npm start
3. Change some code(maybe less) and error has been there.

Expected behavior

Console will not report the Uncaught ReferenceError: process is not defined and there is no iframe cover the page.

Actual behavior

Console reports the Uncaught ReferenceError: process is not defined and there is the iframe cover the page.

Reproducible demo

I will try to reproduce the demo later when I'm free, report the problem at first.

[davepinto]

Thank you for opening this issue, feels good to know I'm not alone. It seems to be related to #8583.
All references to 'win32' === process.platform occur in chalk which is a dependency to create-react-app. No problems compiling production builds. Only when trying to run a live development server.

[Emiya0306]

@davepinto Yes, you are correct. Compiling production builds are successful, it just effect react hot reload.

By the way, is there any workaround to make 'win32' === process.platform working again? I try the config.node = false;, it seem not works. 🤣

[AndryelBlanco]

I'm having the same problem here... I tried in every way to solve this problem

[bkniffler]

Sounds stupid, but putting this on top of your index.js/index.ts file helps

window.process = {};

edit: Better solution 3 posts below :)

[AndryelBlanco]

Like this?

[mitroo]

Exact same issue, just updated react-scripts from 4.0.3 to 5.0.0 and it seems to work just fine. Unfortunately for me, 5.0.0 dropped support for Node 12, and I need to use Node 12 for the moment 🤔

[bkniffler]

Sorry, the "workaround" still blocked the screen, though the errow was muted. What REALLY helped was putting a fixed version of react-error-overlay into devDependencies like:

"react-error-overlay": "6.0.9",

[christopher-caldwell]

Thank you so much. I thought I was going insane with this.. 4.0.1, upgrading to MUI v5. It only happens to me on HMR.

[saad696]

Sorry, the "workaround" still blocked the screen, though the errow was muted. What REALLY helped was putting a fixed version of react-error-overlay into devDependencies like:

"react-error-overlay": "6.0.9",

i already have that version still getting that error...

[Emiya0306]

Hey, everyone! This bug will be fix by CRA team, here is the related issue. @raix Thank you! ❤️

[raix]

I've closed #11771 in favor of this issue. Thanks @Emiya0306 for the clear title and issue reporting, visuals etc. it really helps ton, thank you! ❤️

As this is a regression for CRA 4.x users we want to fix this asap

CRA v5 no longer use react-error-overlay instead work together with the Webpack team on one error-overlay (if anyone are interested in improving it feel free to reach out Here)

---

Temporary workaround if you are blocked and cannot upgrade to CRA v5:

See #11773 (comment) - this worked when testing both yarn and npm - You might have to remove the lock file and node_modules folder (if using yarn you can use resolutions - but again you shouldn't have to)

After running yarn or npm install you can verify the version e.g.
yarn why react-error-overlay or npm why react-error-overlay to see version 6.0.9

[Fosol]

I'm also interested in the resolution for this issue.

[dev-bjoern]

Sorry, the "workaround" still blocked the screen, though the errow was muted. What REALLY helped was putting a fixed version of react-error-overlay into devDependencies like:

"react-error-overlay": "6.0.9",

Thx, for me this got rid of the "process is not defined" error - however the hot reloading still does not work. I can see a chunk being downloaded but the page does not reflect that change. Only after reload I can see the changes. This worked before downgrading to 4.0.3.

[conchau]

I've closed #11771 in favor of this issue. Thanks @Emiya0306 for the clear title and issue reporting, visuals etc. it really helps ton, thank you! ❤️

I upgraded react-scripts to v5, but now my app won't start using npm. I get the following error:

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

Any ideas?

[aruniverse]

I upgraded react-scripts to v5, but now my app won't start using npm. I get the following error:

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

Any ideas?

Try bumping up the heap size: react-scripts --max_old_space_size=4096 start

[conchau]

Try bumping up the heap size: react-scripts --max_old_space_size=4096 start

That doesn't seem to be the issue. These steps were the only way I could get my app to start again:

1. npm i -s --save-exact react-scripts@4.0.3
2. export NODE_OPTIONS="--max-old-space-size=5120"
3. npm start

I did increase the heap size slightly, but I tried upgrading react-scripts to v5 again and it still won't start due to the heap out of memory issue. It seems my app will only run on 4.0.3, but I am still stuck with the injected iframe overlay with every hot reload.

[smac89]

Try bumping up the heap size: react-scripts --max_old_space_size=4096 start

That doesn't seem to be the issue. These steps were the only way I could get my app to start again:

1. `npm i -s --save-exact react-scripts@4.0.3`

2. `export NODE_OPTIONS="--max-old-space-size=5120"`

3. `npm start`

I did increase the heap size slightly, but I tried upgrading react-scripts to v5 again and it still won't start due to the heap out of memory issue. It seems my app will only run on 4.0.3, but I am still stuck with the injected iframe overlay with every hot reload.

You are not stuck with it. There is a perfectly good solution here: #11773 (comment)

Just add the fixed dependency version to the resolutions section of your package.json:

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

[conchau]

You are not stuck with it. There is a perfectly good solution here: #11773 (comment)

Just add the fixed dependency version to the resolutions section of your package.json:

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

No, that still doesn't work. I have tried adding "react-error-overlay": "6.0.9" to both devDependencies (as per that comment) and now resolutions as per your suggestion. Neither option fixes the issue.

[aruniverse]

No, that still doesn't work. I have tried adding "react-error-overlay": "6.0.9" to both devDependencies (as per that comment) and now resolutions as per your suggestion. Neither option fixes the issue.

Adding it to devDepencies won't work. You need to use resolutions with yarn, or use npm-force-resolutions to force the version to be what you specified. Check your lockfile to make sure that the version of react-error-overlay in your app is in fact 6.0.9.

[conchau]

Adding it to devDepencies won't work. You need to use resolutions with yarn, or use npm-force-resolutions to force the version to be what you specified. Check your lockfile to make sure that the version of react-error-overlay in your app is in fact 6.0.9.

Using npm-force-resolutions did the trick, thank you!

Anyone know why upgrading to v5 would not allow the app to start?

[smac89]

Adding it to devDepencies won't work. You need to use resolutions with yarn, or use npm-force-resolutions to force the version to be what you specified. Check your lockfile to make sure that the version of react-error-overlay in your app is in fact 6.0.9.

Using npm-force-resolutions did the trick, thank you!

Anyone know why upgrading to v5 would not allow the app to start?

My guess is that there are some deeply nested dependency incompatibility issues associated with v5 of create-react-app.

As you can see from this current issue, the problem was that react-error-overlay was updated to support webpack v5, and I guess one of its dependants (or one of their dependants 🐢) did not pin it to v6.0.9, so anyone still on cra v4 and does a yarn install while having installed one of the dependants of react-error-overlay which wasn't pinned, would have inadvertently been upgraded to v6.0.10 of this package (without knowing), which will soon lead to this frustrating bug.

I would hold off on upgrading to cra v5 yet, unless your project is pretty small and doesn't use a lot of dependencies, otherwise, let the react team consolidate broken dependencies, and we'll see what happens with v5.0.1.

[Hideman85]

Definitely happening, react-error-overlay v6.0.10 crash with process is undefined, yarn resolutions to force react-error-overlay v6.0.9 is currently working around the issue.

[martinrodfl]

I have the same error, first I delete node_modules, then I delete package-lock.json, then I install "npm i -D react-error-overlay@6.0.9" , and finally npm install. That worked for me.
Here are some ways to deal with the error.

[martinrodfl]

https://9to5answer.com/react-uncaught-referenceerror-process-is-not-defined

[pateljay1397]

When I use self-closing tags in my react application, where they are being closed like <></,> instead of only </>, they are escaping react-overlay and crash my application do you have any idea about this bug?
Link for all self-closing tags: https://developer.mozilla.org/en-US/docs/Glossary/Void_element

[DanielRuf]

@pateljay1397 the React fragment issue is probably not related.

Please open a new issue with all required details.

[HelloRickey]

yarn add react-error-overlay@6.0.9 --dev

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

[Zhironkin]

The following helped me
package.json:
"resolutions": { "react-error-overlay": "6.0.9" }, "react-error-overlay": "6.0.9"

and because i use webpack and plugin react-refresh-webpack-plugin:
const plugins = []; if (process.env.SERVE) { plugins.push(new ReactRefreshWebpackPlugin()) }

[angularbinh2020]

add this to file html in public folder. this worked for me
body > iframe {
display: none;
}

[ShaedulOffDev]

Describe the bug

When I change the code and emit the hot-reload, there is iframe cover the whole page and report Uncaught ReferenceError: process is not defined.

Did you try recovering your dependencies?

Yes. It wasn't happened before I recover my dependencies. After I recover my dependencies(remove node_module / package-lock.json and reinstall the dependencies), the problem has been there.

Which terms did you search for in User Guide?

Uncaught ReferenceError: process is not defined hot-reload webpackHotDevClient "win32"===process.platform

Environment

Environment Info:

current version of create-react-app: 4.0.3 running from /Users/xxx/.config/yarn/global/node_modules/create-react-app

System: OS: macOS Mojave 10.14.3 CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz Binaries: Node: 11.6.0 - /usr/local/bin/node Yarn: 1.22.17 - /usr/local/bin/yarn npm: 6.5.0 - /usr/local/bin/npm Browsers: Chrome: 96.0.4664.110 Edge: Not Found Firefox: 94.0.2 Safari: 12.0.3 npmPackages: react: 16.12.0 => 16.12.0 react-dom: 16.12.0 => 16.12.0 react-scripts: ^4.0.3 => 4.0.3 npmGlobalPackages: create-react-app: Not Found

(paste the output of the command here.)

Steps to reproduce

1. Reinstall the node_modules.
2. npm start
3. Change some code(maybe less) and error has been there.

Expected behavior

Console will not report the Uncaught ReferenceError: process is not defined and there is no iframe cover the page.

Actual behavior

Console reports the Uncaught ReferenceError: process is not defined and there is the iframe cover the page.

Reproducible demo

I will try to reproduce the demo later when I'm free, report the problem at first.

https://www.youtube.com/watch?v=GG6FI5-GsFk

[MNazran]

Change react-scripts to "5.0.1" work for me.