process is not defined on hot reload

Question

I have a react app made with create react app, and hot reloading kills the page entirely with the error:

Uncaught ReferenceError: process is not defined

What's strange is that there seems to be an iframe injected which I never noticed before:

This iframe is added to the DOM as soon as I reload and breaks the page as well as preventing an update. I can't find any documentation on "iframe-bundle.js" online.

Edit: I tried deleting my node modules and any questionable imports (I temporarily installed craco prior). Still the same issue. It's incredibly annoying!

Edit 2: If I delete that iframe everything seems to return to normal, i.e. page updates and is interactable

Chris · Answer 1 · 2022-02-02T19:03:53.707

106

Upgrading your application to CRA (react-scripts) v5 with npm i react-scripts@latest will fix the issue.

If your app is not able to be upgraded because dependencies are incompatible or you require node version < 14, you can try the following workaround which worked for me:

Revert back to CRA 4: npm i --save-exact [email protected]
Add react-error-overlay as a dev dependency: npm i --save-dev [email protected]
Then add the following line to your package.json

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

If you're using NPM, force your package-lock.json file to actually use 6.0.9 with npx npm-force-resolutions

If you're using Yarn, just run yarn install and your resolutions will be applied and fix the issue

More info at https://github.com/facebook/create-react-app/issues/11773

edited Feb 02 '22 at 19:03

answered Dec 18 '21 at 09:47

Chris

1,251
2
8
8

2

error is still appears but hot reload works – Baganaakh Dec 23 '21 at 07:08
2

Thank you! I went back MONTHS in commit history and this was popping up when it never used to. Could not track down the reason at all, and this was the only fix. You are outstanding. If anyone is seeing this error message even if it has nothing to do with iframe (only similarity for me was the error, not the scenario), try this option first. +1000. – DORRITO Feb 27 '22 at 23:12
1

updating react-scripts worked – Ramesh Vishnoi May 04 '22 at 07:17
1

`react-error-overlay` trick worked with [email protected]. Thank you! – manuelmhtr Jul 19 '22 at 01:03
1

worked like a charm! I didnt need to add the resolutions part in though – Vimuth Aug 01 '22 at 06:36
1

This finally worked for me! We're using pnpm on our monorepo project which as a unique way of handling package. Basically, it was keeping a 6.0.10 version in ./node_modules/.pnpm/.... ! Once I figured that out and deleted it, it was ok! – pierreaurelemartin Nov 25 '22 at 17:35
Excellent, it also worked for me without the resolution part. – Pavel Schoffer Apr 08 '23 at 18:06

score 11 · Accepted Answer · answered Dec 15 '21 at 22:41

11

I fixed it. I did 2 things:

Updated npm to latest
Updated react-scripts to latest

Not sure which one fixed it.

answered Dec 15 '21 at 22:41

Dara Java

2,410
3
27
52

4

I got same issue today and updating `react-scripts` worked for me. – shaktiman_droid Dec 17 '21 at 19:10
Try Chris’ answer below if you can’t easily upgrade to a new major version of react-scripts. – seidtgeist Feb 22 '22 at 09:30

score 10 · Answer 3 · edited Jan 06 '22 at 05:48

10

I recently had this issue aswell. I did couple of things to make it work. You can try these aswell.

Change the react-script version to 4.0.3 inside package.json.
Add this to package.json, below the dependencies.

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

Install react-error-overlay v6.0.9 inside your devDependencies.
Remove your node_modules and package-lock.json.
Do npm install and check that works.

Note: After doing the above steps I had to run npm install [email protected] again to fix this issue.

edited Jan 06 '22 at 05:48

Dharman

30,962
25
85
135

answered Jan 06 '22 at 05:43

Kiran

323
4
16

Tkanks a lot ! I don't know why, my yarn.lock and react-error-overlay version was already v6.0.9, but I had to run 'yarn add [email protected]' to make it works – Damien Romito Jan 24 '22 at 17:54

score 4 · Answer 4 · answered Nov 17 '22 at 14:38

4

Make sure your react-scripts version is ^4.0.3, then install react-error-overlay as devDependencies using this command below:

npm i -D [email protected] on NPM

yarn add -D [email protected] on Yarn

answered Nov 17 '22 at 14:38

fxbayuanggara

316
3
16

score 1 · Answer 5 · answered Jun 09 '22 at 07:10

1

I tried the answers above, but non of those fixed the issue for me. What I did to solve this problem in my case was:

Delete node_modules
clearing the cache -> npm cache clean --force
install the latest react-scripts version -> npm i react-scripts@latest

answered Jun 09 '22 at 07:10

Luke_KS

123
2
11

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 09 '22 at 19:50

process is not defined on hot reload

5 Answers5

Linked