CODEWITHSUNDEEP
reactjscreate-react-apphot-reload
DaraJ
DaraJ

Reputation: 3076

process is not defined on hot reload

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:

enter image description here

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

Upvotes: 55

Views: 36371

Answers (5)

fxbayuanggara
fxbayuanggara

Reputation: 337

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

Upvotes: 5

Luke_KS
Luke_KS

Reputation: 183

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

Upvotes: 1

Chris
Chris

Reputation: 1351

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

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

Upvotes: 114

Kiran
Kiran

Reputation: 373

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.

Upvotes: 10

DaraJ
DaraJ

Reputation: 3076

I fixed it. I did 2 things:

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

Not sure which one fixed it.

Upvotes: 11

Related Questions