create-react-app: Is this the bug of react-error-overlay?

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

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

window.process = {};

edit: Better solution 3 posts below 😃

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…

2 steps to resolve:

1. Delete react.
2. Install vue. Problem solved 😃

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

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.

@ihorbond 2 steps to resolve: 1. Delete react. 2. Install vue. Problem solved 😃

If problem remains

1. Delete windows
2. Install linux 🙂

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

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.

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.

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

can you guys stop pinging everyone!!!, instead wait for contributions to reply. can yo lock down this thread pls @iansu

Please refer the stackoverflow solution for temporary work around . I went with pointer-events: none; . . https://stackoverflow.com/questions/70499543/create-react-app-creates-this-iframe-that-prevents-me-from-clicking-or-editing

After working for ages, overnight it seems like this bug came back?

“react-error-overlay”: “6.0.9”

Is no longer a solution.

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

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.

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 🤔

<iframe...> error is in only develop, on deploy production no.

My solution is with css:

body>iframe{

}

You can use display: none or pointer-events: none, like you prefer.

does this bug has a solution? this has been driving me crazy and I’ve tried all of these possible solutions and nothing solves it

@c0b41 they shouldn’t lock an issue that is still present.

also, you can just unsubscribe from the issue. no one’s pinging anybody

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

glad to know i’m not alone

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.

@DanielRuf Thanks but npm ls react-error-overlay does show 6.0.9 for me so I don’t think that’s the issue.

Switching to vite solved all my issues. Webpack 5 causes tons of issues with other libraries, and CRA doesn’t let me stick to v4 due to this issue. vite uses rollup which does not have these issues. Porting took me 30 minutes and it also has native web worker support. Unfortunately, for me, this was the correct solution. Ditch CRA and webpack.

Same here, bug suddenly came back. Upgrading to v5 leads to a whole lot of other issues.

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;
}

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.

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 🚀

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

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?

Like this?

Is there any official update on this?

Please refer the stackoverflow solution for temporary work around . I went with pointer-events: none; . . https://stackoverflow.com/questions/70499543/create-react-app-creates-this-iframe-that-prevents-me-from-clicking-or-editing

If you use iframes elsewhere in your app, this is more specific:

body > iframe {pointer-events: none;}

Cheers, Paul

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

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

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.

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

This Worked. Thanks A LOT !! Just remeber to clean install and npm start after doing this.

@raix any updates for 4.x users? I’m trying to port an ejected app back to 5 since I think you said this is fixed there, but that’s slow. As it currently is hot reload doesn’t work as the page throws with the error OP posted.

After working for ages, overnight it seems like this bug came back?

“react-error-overlay”: “6.0.9”

Is no longer a solution.

Tried the same, but still not resolved; @shivashanmugam 's 2nd solution worked for me.

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.

@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. 🤣

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

I had the same problem in reactJs and I fixed it with these steps:

Add to package.json:

1. “scripts”: { “preinstall”: “npx npm-force-resolutions” }
2. , “resolutions”: { “react-error-overlay”: “6.0.9” }

i don’t think anyone’s pinging anyone… it’s still a current issue yet to be tended to with the right solution

Hi all, i had to face this problem for many days but just after installing the library react-error-overlay@9.0.6 its working fine and my app does not need now to refresh hard on every code changing event. thanks

If someone has the same issue with npm, there is a plugin for npm 6: https://www.npmjs.com/package/npm-force-resolutions

Starting with npm 7 there is pkg.overrides available as new feature out of the box:

https://stackoverflow.com/a/64452515/753676

pkg.resolutions is natively only supported by yarn.

We had the same issue with craco / react-scripts v4 which uses react-error-overlay@6.0.10 (seems there is some regression).

With the resolution yarn why react-error-overlay shows react-error-overlay@6.0.9. For npm try npm ls react-error-overlay to see the currently installed and used version.

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

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

I’m having the same problem here… I tried in every way to solve this problem

Exatamente o mesmo problema, apenas atualizado react-scriptsde 4.0.3 para 5.0.0 e parece funcionar bem. Infelizmente para mim, o 5.0.0 abandonou o suporte para o Node 12 e preciso usar o Node 12 no momento🤔

Hello! this save me!

Thanks!

you can run this yarn add react-scripts@latest or npm install react-scripts@latest

is there any workaround that works? I’ve tried solutions mentioned below but did not help. using react-scripts@4.0.3

For those who are using create-react-app with customize-cra you can use the Method 2 solution from @smac89 here with addWebpackPlugin, this works fine 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 the console when I run 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 😃

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

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

@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 🙂

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"

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?