Is this the bug of react-error-overlay?
Emiya0306 opened this issue · 96 comments
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
- Reinstall the node_modules.
npm start- 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.
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.
@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. 🤣
I'm having the same problem here... I tried in every way to solve this problem
Sounds stupid, but putting this on top of your index.js/index.ts file helps
window.process = {};
edit: Better solution 3 posts below :)
Like this?
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 🤔
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",
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.
Sorry, the "workaround" still blocked the screen, though the errow was muted. What REALLY helped was putting a fixed version of
react-error-overlayinto devDependencies like:"react-error-overlay": "6.0.9",
i already have that version still getting that error...
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
I'm also interested in the resolution for this issue.
Sorry, the "workaround" still blocked the screen, though the errow was muted. What REALLY helped was putting a fixed version of
react-error-overlayinto 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.
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?
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 memoryAny ideas?
Try bumping up the heap size: react-scripts --max_old_space_size=4096 start
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:
npm i -s --save-exact react-scripts@4.0.3export NODE_OPTIONS="--max-old-space-size=5120"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.
Try bumping up the heap size:
react-scripts --max_old_space_size=4096 startThat 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"
},
You are not stuck with it. There is a perfectly good solution here: #11773 (comment)
Just add the fixed dependency version to the
resolutionssection 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.
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.
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?
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.
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.
Theres a pull-request fixing this issue - will be released in 5.0.1 patch version
Try bumping up the heap size:
react-scripts --max_old_space_size=4096 startThat 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
resolutionssection 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.
i upgrage "react-scripts": "^4.0.2" -> react-scripts": "^4.0.3"
Sorry, the "workaround" still blocked the screen, though the errow was muted. What REALLY helped was putting a fixed version of
react-error-overlayinto 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"
Sorry, the "workaround" still blocked the screen, though the errow was muted. What REALLY helped was putting a fixed version of
react-error-overlayinto 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"
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.
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"
}
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?
Sorry, the "workaround" still blocked the screen, though the errow was muted. What REALLY helped was putting a fixed version of
react-error-overlayinto devDependencies like:"react-error-overlay": "6.0.9",
It works for me on 4.0.3 of react-scripts.
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
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"
2 steps to resolve:
- Delete react.
- Install vue.
Problem solved :)
@ihorbond
2 steps to resolve:
1. Delete react.
2. Install vue.
Problem solved :)
If problem remains
- Delete windows
- Install linux 🙂
If problem still remains
- Please consider a new carrier path 🤣
@ihorbond
2 steps to resolve:
- Delete react.
- Install vue.
Problem solved :)If problem remains
- Delete windows
- 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
},It worked for me after updating
"react-scripts": "4.0.3"
and
"resolutions": {
"react-error-overlay": "6.0.9"
}
@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 🙂
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 🚀
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
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
As you can see from this current issue, the problem was that
react-error-overlaywas updated to support webpack v5, and I guess one of its dependants (or one of their dependants 🐢) did not pin it tov6.0.9, so anyone still on cra v4 and does ayarn installwhile having installed one of the dependants ofreact-error-overlaywhich wasn't pinned, would have inadvertently been upgraded tov6.0.10of 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
As you can see from this current issue, the problem was that
react-error-overlaywas updated to support webpack v5, and I guess one of its dependants (or one of their dependants 🐢) did not pin it tov6.0.9, so anyone still on cra v4 and does ayarn installwhile having installed one of the dependants ofreact-error-overlaywhich wasn't pinned, would have inadvertently been upgraded tov6.0.10of 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.
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;
}
Hacky solution:
Use CSS to make that particular
iframenever 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
Hacky solution:
Use CSS to make that particulariframenever 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). Thepointer events: nonewon'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.
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 #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
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
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
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 :)
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.
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.
Same here, bug suddenly came back. Upgrading to v5 leads to a whole lot of other issues.
+1 Randomly started to happen, solutions above do not help, also causes issues with react-markdown if you override process globally
is there any workaround that works? I've tried solutions mentioned below but did not help.
using react-scripts@4.0.3
Please refer the stackoverflow solution for temporary work around . I went with
pointer-events: none;.
If you use iframes elsewhere in your app, this is more specific:
body > iframe {pointer-events: none;}
Cheers,
Paul
This is breaking my entire hot reload process
Facing same issue , is there any other fix available? I already tried using react-error-overlay version to 6.0.9 but none seems to work.
Break again, I try to add "react-error-overlay@6.0.9" but still not working!
Any solution to fix it?
@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.
data is being over used by depository plugin for updated test. 1.Multiple plugins from unknown source is cause malfunction response to topics. will fix issue implement asap
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.
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.
I had the same problem with the process is not defined. I removed Craco and installed the newest version of tailwindCSS without it, works for me. Important is to remove craco before the new installation.
Sorry, the "workaround" still blocked the screen, though the errow was muted. What REALLY helped was putting a fixed version of
react-error-overlayinto devDependencies like:"react-error-overlay": "6.0.9",
This Worked. Thanks A LOT !! Just remeber to clean install and npm start after doing this.
Sorry, the "workaround" still blocked the screen, though the errow was muted. What REALLY helped was putting a fixed version of
react-error-overlayinto devDependencies like:"react-error-overlay": "6.0.9",This Worked. Thanks A LOT !! Just remeber to clean install and npm start after doing this.
This worked for me too!
glad to know i’m not alone
Is there any official update on this?
I finally got it working using the advice repeated in many places - here's one. If you've tried that and it isn't working for you, try:
npm ls react-error-overlayto confirm you actually have 9.0.6- Restart your dev server after making the changes (I didn't think to do this for several hours).
Hope this helps someone!
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
can you guys stop pinging everyone!!!, instead wait for contributions to reply. can yo lock down this thread pls @iansu
@c0b41 they shouldn't lock an issue that is still present.
also, you can just unsubscribe from the issue. no one's pinging anybody
i don’t think anyone’s pinging anyone… it’s still a current issue yet to be tended to with the right solution
There are a few steps you have to do:
- npm install -D react-error-overlay@6.0.9
- remove dependency from package.json ( rollback )
- remove dependency from package-lock.json's "devDependencies" ( first match of "react-error-overlay" in package-lock.json )
For testing purposes you can simply delete node_modules and run npm install.
Hope it will help
Solution:
If you are using npm:
npm i -D react-error-overlay@6.0.9
If you are using yarn:
yarn add -D react-error-overlay@6.0.9
I had the same problem in reactJs and I fixed it with these steps:
Add to package.json:
- "scripts": {
"preinstall": "npx npm-force-resolutions"
} - ,
"resolutions": {
"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.
@dev-bjoern Same for me. Error's gone but hot reload doesn't work at all, though the screen no longer freezes.
@bdrazen see the other comments and hints regarding overrides (npm) / resolutions (yarn)
This ensures that the whole dependency tree uses the correct version.
@DanielRuf Thanks but npm ls react-error-overlay does show 6.0.9 for me so I don't think that's the issue.
@bdrazen & @dev-bjoern I just upgraded from 3.4.4 to 4.0.3 and am facing the exact same issue with react-error-overlay properly resolved to 6.0.9 only. Did you happen to figure anything out?
@bdrazen @dev-bjoern and anyone else who hits this. It was because FAST_REFRESH is on by default and I was on react 16.8.6, upgrading to 16.14.0 fixed it, see #9350. I ignored the warning because I assumed it would fall back to "slow" refresh, no no refresh ha ha.
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
<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.
I had the same problem in reactJs and I fixed it with these steps:
Add to package.json:
- "scripts": {
"preinstall": "npx npm-force-resolutions"
}- ,
"resolutions": {
"react-error-overlay": "6.0.9"
}
it's work
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
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
@pateljay1397 the React fragment issue is probably not related.
Please open a new issue with all required details.
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" } }
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()) }
add this to file html in public folder. this worked for me
body > iframe {
display: none;
}
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 definedhot-reloadwebpackHotDevClient"win32"===process.platformEnvironment
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
- Reinstall the node_modules.
npm start- Change some code(maybe less) and error has been there.
Expected behavior
Console will not report the
Uncaught ReferenceError: process is not definedand there is no iframe cover the page.Actual behavior
Console reports the
Uncaught ReferenceError: process is not definedand 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.
Change react-scripts to "5.0.1" work for me.