53

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

Dara Java
  • 2,410
  • 3
  • 27
  • 52

5 Answers5

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:

  1. Revert back to CRA 4: npm i --save-exact react-scripts@4.0.3
  2. Add react-error-overlay as a dev dependency: npm i --save-dev react-error-overlay@6.0.9
  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

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 react-scripts@4.0.3. 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
11

I fixed it. I did 2 things:

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

Not sure which one fixed it.

Dara Java
  • 2,410
  • 3
  • 27
  • 52
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 react-error-overlay@6.0.9 again to fix this issue.

Dharman
  • 30,962
  • 25
  • 85
  • 135
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 react-error-overlay@6.0.9' to make it works – Damien Romito Jan 24 '22 at 17:54
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 react-error-overlay@6.0.9 on NPM

yarn add -D react-error-overlay@6.0.9 on Yarn

fxbayuanggara
  • 316
  • 3
  • 16
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:

  1. Delete node_modules
  2. clearing the cache -> npm cache clean --force
  3. install the latest react-scripts version -> npm i react-scripts@latest
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