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 https://github.com/facebook/create-react-app/issues/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! :heart:

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 https://github.com/facebook/create-react-app/issues/11773#issuecomment-995933869 - 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: https://github.com/facebook/create-react-app/issues/11773#issuecomment-995933869

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 :turtle:) 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.

[raix]

Theres a pull-request fixing this issue - will be released in 5.0.1 patch version

[nhandt2021]

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"
},

This method solved my issue. Using Yarn to install. Thank's a lot.

[itminhnhut]

i upgrage "react-scripts": "^4.0.2" -> react-scripts": "^4.0.3"

[SunD004]

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",

worked for me with "react-scripts": "^4.0.2" and fixed with "react-error-overlay": "6.0.9"

[JohnnyJSz]

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 had the same issue and this solution worked for me. I had to run

npm install react-error-overlay@6.0.9 --save-dev

My environment info now is

"react-error-overlay": "^6.0.9" //devDependency
"react-scripts": "4.0.1"

[obipascal]

For upgrading react-script 5.0.0 worked! Well for me. I did all the above solutions none worked except for upgrading to react-script 5.0.0 which finally worked.

[tyler-mitchell]

If you're using yarn resolutions in a yarn workspace, make sure that you define it in the root package.json.

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

[fsyud]

I have the same problem that process worked fine the first time but it happens when hot overloading builds. I wonder if it's the NodeJS version?

[Yohanson555]

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",

It works for me on 4.0.3 of react-scripts.

[meetzoo]

until a fix is final, 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

[HeavenlyEntity]

Hello, fellow devs! I have checked my yarn.lock file and added the "resolutions" to the package.json and I am still getting this same error as the "win32"===process.platform&&..... is still popping up. What are your recommendations? I have to keep manually refreshing the page.

Running react-scripts: "4.0.3"

[ihorbond]

2 steps to resolve:

1. Delete react.
2. Install vue. Problem solved :)

[Hideman85]

@ihorbond 2 steps to resolve:

1. Delete react.
2. Install vue. Problem solved :)

If problem remains

1. Delete windows
2. Install linux :slightly_smiling_face:

If problem still remains

- Please consider a new carrier path :rofl:

[HeavenlyEntity]

@ihorbond 2 steps to resolve:

1. Delete react.
2. Install vue. Problem solved :)

If problem remains

1. Delete windows
2. Install linux 🙂

If problem still remains

• Please consider a new carrier path 🤣

Funny! but not funny...😑 this is a React thread not a Vue one - hold your smart remarks to yourself if you don't know a logical suggestion.

I am using a MUI 5 template when this started happening. Called Tokyo you can try out the free version and test it out. But I am also using the newest beta of react-router could this be conflicting somehow? Or a bad combination of packages that cause this? I had to do a lot of hacking to get react-scripts 5 to work because the polyfills not being there. I had to override the webpack.config.js with react-app-rewired inserting the node: { global: true } in order to get the app to even load up. Having to install some devDeps to resolve the polyfill missing module errors. Yet the error was still happening even after I did all that and was able to get the app running but any code change and save that process of undefined shows up. I then reverted back to 4.0.3 to save the headache of messing with react-app-rewired thinking that was the issue. Something I noticed tho when being on version 5 it wasn't an HTMLIFrameElement.onLoad() event that was breaking it. It instead gave me a different error where process was still undefined.

Update: So I have found a direct correlation with eslint that is causing the react-error-overlay to break. If you have the following plugins this will cause issues with it:

"extends": ["airbnb", "plugin:prettier/recommended"],
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "requireConfigFile": false
  },

[sunnydaloopa]

It worked for me after updating "react-scripts": "4.0.3" and

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

[Hideman85]

@HeavenlyEntity Funny! but not funny... :expressionless:

You're right! The yarn resolutions solution fix most of the time the issue but it can remain some with special configs.

Back to react and create-react-app, I got also so much troubles with it in the past... I'm not using MUI but AntDesign and same here I had to use react-app-rewired start to modify webpack config and be cra friendly... such painful.

In the end I came to eject the config and manage it by my self, in the beginning I was a bit afraid but it came to be so much easier. Everything is setup correctly, webpack, babel stuff, eslint, typescript... and the only changes I had to make in the past year was migration from webpack 4 to 5 (pretty fine) and migration of the use of react-dev-utils/ForkTsCheckerWebpackPlugin.

I can tell this saved me so much brain life time and it is also perfect to have the control in CI/CD process. I think in the end I prefer to have my hands on the config rather than leverage it to a black box obscure cra friendly rewired config. You can always try in on a separate branch and see if that works for you in this way :slightly_smiling_face:

[obipascal]

Mind was fix by deleting the node_modules folder then running yarn to install new packages

OBI PASCAL BANJUARE

On Mon, Jan 24, 2022 at 9:06 AM Hideman85 @.***> wrote:

@HeavenlyEntity https://github.com/HeavenlyEntity Funny! but not funny... 😑

You're right! The yarn resolutions solution fix most of the time the issue but it can remain some with special configs.

Back to react and create-react-app, I got also so much troubles with it in the past... I'm not using MUI but AntDesign and same here I had to use react-app-rewired start to modify webpack config and be cra friendly... such painful.

In the end I came to eject the config and manage it by my self, in the beginning I was a bit afraid but it came to be so much easier. Everything is setup correctly, webpack, babel stuff, eslint, typescript... and the only changes I had to make in the past year was migration from webpack 4 to 5 (pretty fine) and migration of the use of react-dev-utils/ForkTsCheckerWebpackPlugin.

I can tell this saved me so much brain life time and it is also perfect to have the control in CI/CD process. I think in the end I prefer to have my hands on the config rather than leverage it to a black box obscure cra friendly rewired config. You can always try in on a separate branch and see if that works for you in this way 🙂

— Reply to this email directly, view it on GitHub https://github.com/facebook/create-react-app/issues/11773#issuecomment-1019819056, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHJIF5CNUELWM6TIB7BLLT3UXUCB7ANCNFSM5KFFCDIA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you commented.Message ID: @.***>

[BenSmith123]

Not sure if this will work for everyone but I fixed the issue by just not using optional chaining on the .env e.g.

process?.env?.NODE_ENV = error process.env?.NODE_ENV = fixed 🚀

[Valter4o]

We had this issue and we managed to resolve it with resolving to react-overlay version, but until then I wrote a small script that gets rid of that overlay, so if anyone is still facing this issue, can you this piece of code as a TEMPORARY solution in the index.js file . Don't leave such a code in your codebase, please for the love of whatever God you believe or not believe in. It just helped us work on the other tasks until we resolve the issue and it may help you, even that I doubt there are a lot of people not being able to resolve the issue seeing how long this discussion is

[drschulz]

For anyone with ejected apps from react-scripts 4.x that:

• are using the most up to date react-dev-utils (12.0.0 at the time of posting)
• upgraded to webpack 5 themselves

and are hitting this issue, it could be that your webpack config still has a line similar to the following in the entry:

...(!isProdBuild ? [require.resolve('react-dev-utils/webpackHotDevClient')] : []),

or

webpackDevClientEntry

Deleting this line will fix the issue. Latest react-scripts is not using webpackHotDevClient which is what is actually importing/utilizing the error overlay. You can see it removed here: https://github.com/facebook/create-react-app/pull/11201/files#diff-8e25c4f6f592c1fcfc38f0d43d62cbd68399f44f494c1b60f0cf9ccd7344d697L47

[damienromito]

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.

The module react-dev-utils have the @^6.0.9 dependency and not @6.0.9, this way, it installed the @6.0.10 instead... The solution I found was to manually copy the react-error-overlay folder with the right version (6.0.9) and paste it in the react-dev-utils/node_modules

[planeer]

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.

The module react-dev-utils have the @^6.0.9 dependency and not @6.0.9, this way, it installed the @6.0.10 instead... The solution I found was to manually copy the react-error-overlay folder with the right version (6.0.9) and paste it in the react-dev-utils/node_modules

@damienromito You don't have to manually copy if you add this to package.json:

  "resolutions": {
    "react-scripts/**/react-error-overlay": "6.0.9",
  }

Also a hint for anyone using yarn workspaces: you must put resolutions in package.json in the root of the project, not in the problematic workspace.

[nattui]

Hacky solution:

Use CSS to make that particular iframe never the target of pointer events.

iframe[style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; border: none; z-index: 2147483647;"] {
  pointer-events: none;
}

[Valter4o]

Hacky solution:

Use CSS to make that particular iframe never the target of pointer events.

iframe[style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; border: none; z-index: 2147483647;"] {
  pointer-events: none;
}

Wouldn't it be better to assign it display:none !important (the important may not be necessary but just in case). The pointer events: none won't make the page usable as the iframe is covering the whole page

[nattui]

Hacky solution: Use CSS to make that particular iframe never the target of pointer events.

iframe[style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; border: none; z-index: 2147483647;"] {
  pointer-events: none;
}

Wouldn't it be better to assign it display:none !important (the important may not be necessary but just in case). The pointer events: none won't make the page usable as the iframe is covering the whole page

Both works! It's probably better to use display: none, as when you are inspecting in Chrome Developer tools. It is a better developer experience to not have that iframe to be selectable when inspecting.

[thomasoss]

I had the same problem. When passing an array to a react component the error "react-uncaught-referenceerror-process-is-not-defined ...." arised

My configuration is: "react": "^16.13.1", "react-bootstrap": "^1.3.0", "react-dom": "^16.13.1", "react-scripts": "3.4.3",

To solve the problem this had to be added to the package.json

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

Then delete yarn.lock (and package-log.json if present) and the nodes_modules directory and execute yarn $ yarn

[jamesplease]

cc @iansu . This bug is likely causing a considerable amount of frustration with users and may be motivating people switch to alternative build tools. If you haven't already seen this issue I'd encourage you/the rest of the team to prioritize it.

One possible PR solution is #12023, but I'm not sure if that fully fixes it (for example, it is my understanding that we would want pointer events once the error displays so that people can click on the stack traces, and it's not clear to me from the diff if that PR prevents that).

---

And a bit of opinion: this has always been my least favorite feature of CRA. This is prob cOnTRoVErSal but it might be worth removing it altogether if it's not possible to make it reliable 100% of the time

[csandanov]

I had the same issue with react-scripts 5.0.0, none of the suggestions from here helped me, so I downgraded to 4.0.3 and this has resolved my issue