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

Polyethylene

Answer 1

I fixed it. I did 2 things:

• Updated npm to latest
• Updated react-scripts to latest

Not sure which one fixed it.

Polyethylene

I got same issue today and updating react-scripts worked for me. – Leprous

Try Chris’ answer below if you can’t easily upgrade to a new major version of react-scripts. – Eld

Answer 2

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:

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

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

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

Digamma

error is still appears but hot reload works – Explicit

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

updating react-scripts worked – Kay

react-error-overlay trick worked with [email protected]. Thank you! – Roxi

worked like a charm! I didnt need to add the resolutions part in though – Riddell

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! – Elsi

Excellent, it also worked for me without the resolution part. – Kiesha

Wow what a legend. After trying to figure out the issue for 2 hours this was the fix. – Economist

Answer 3

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.

Knuckle

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 🙏 – Penmanship

Answer 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

Brindisi

Answer 5

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:

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

Stoat

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