search

facebook / create-react-app

Set up a modern web app by running one command.
https://create-react-app.dev
MIT License
102.76k stars 26.87k forks source link

Is this the bug of react-error-overlay? #11773

Closed Emiya0306 closed 1 year ago

Emiya0306 commented 2 years ago

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.

image

image

image

image

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.

ranzolinrafa commented 2 years ago

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.

// 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 :)

shivashanmugam commented 2 years ago

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

brettandrew commented 2 years ago

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

"react-error-overlay": "6.0.9"

Is no longer a solution.

sameersitre commented 2 years ago

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.

C5H8NNaO4 commented 2 years ago

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

cgvalayev commented 2 years ago

+1 Randomly started to happen, solutions above do not help, also causes issues with react-markdown if you override process globally

irzhywau commented 2 years ago

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

ptallettms commented 2 years ago

Please refer the stackoverflow solution for temporary work around . I went with pointer-events: none; . image . 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

stevemk14ebr commented 2 years ago

This is breaking my entire hot reload process

KrishKash commented 2 years ago

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.

thatthanhkai commented 2 years ago

Break again, I try to add "react-error-overlay@6.0.9" but still not working! Any solution to fix it?

stevemk14ebr commented 2 years ago

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

fig666 commented 2 years ago

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

stevemk14ebr commented 2 years ago

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.

DanielRuf commented 2 years ago

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.

Jauki commented 2 years ago

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.

waleed2812 commented 2 years ago

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.

macalinao commented 2 years ago

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.

This worked for me too!

konnodonnoi commented 2 years ago

glad to know i’m not alone

Christian-Toney commented 2 years ago

Is there any official update on this?

uthbees commented 2 years ago

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:

Hope this helps someone!

sulphitic786 commented 2 years ago

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

c0b41 commented 2 years ago

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

Christian-Toney commented 2 years ago

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

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

konnodonnoi commented 2 years ago

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

ViacheslavSurovets commented 2 years ago

There are a few steps you have to do:

velikayikci commented 2 years ago

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

asmatanavar commented 2 years ago

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" }
bdrazen commented 2 years ago

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.

DanielRuf commented 2 years ago

@bdrazen see the other comments and hints regarding overrides (npm) / resolutions (yarn)

https://github.com/facebook/create-react-app/issues/11773#issuecomment-1084713045

This ensures that the whole dependency tree uses the correct version.

bdrazen commented 2 years ago

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

mjgallag commented 2 years ago

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

mjgallag commented 2 years ago

@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 https://github.com/facebook/create-react-app/pull/9350. I ignored the warning because I assumed it would fall back to "slow" refresh, no no refresh ha ha.

JoaoVitorOnofreS commented 2 years ago

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

Eriold commented 2 years ago

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

LaughingZhu commented 2 years ago

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

it's work

TzachiGitHub commented 1 year ago

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

martinrodfl commented 1 year ago

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 commented 1 year ago

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

pateljay1397 commented 1 year ago

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 commented 1 year ago

@pateljay1397 the React fragment issue is probably not related.

Please open a new issue with all required details.

HelloRickey commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

ShaedulOffDev commented 8 months ago

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.

image

image

image

image

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 commented 8 months ago

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