create-react-app: Hot Reload Fails, DOM adds an additional iframe containing entire contents of the html DOM element

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.

Hope this helps!!

@jake-engel this issue shouldn’t have been closed. This has to be fixed internally and not by some workarounds

The solution of install react-error-overlay didn’t work for me and neither did the update to version 5 of react-scripts (the application doesn’t start correctly). The iframe keeps showing up every time I make a code change.

The solution of install react-error-overlay didn’t work for me and neither did the update to version 5 of react-scripts (the application doesn’t start correctly). The iframe keeps showing up every time I make a code change.

have you been able to solve this? I have exact problem

try this:

package.json

  "eslintConfig": {

    "env": {
      "browser": true,
      "node": true
    }
  },

Didn’t work the below steps. Still there is iframe inside the dom.

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.

Hope this helps!!

This worked for me as well. The last note step is finally what did it. Thanks

If you are using Yarn 2, Yarn 3, or Yarn berry, you need to manually patch your yarn.lock file, since Yarn 2+ doesn’t obey the resolutions property of package.json. Instructions can be found here.

It’s working for me, but I need to reinstall react-error-overlay again… It’s really boring

For them who did not got this fixed with @kirannambiar12 solution, make sure the “resolutions” in package.json did it’s job.

1. Open package-lock.json and search for react-error-overlay and check if any of the matches have version other than "6.0.9". If there are any, the “resolutions” section did not work.
2. Add a script in scripts section, "preinstall": "npx npm-force-resolutions"
3. Do npm install

Now do step 1 again. This time all matches for react-error-overlay should have version "6.0.9". If they do, the fast refresh should work as expected.

Worked for me! Thanks a bunch

Hi, for anyone still encountering the issue, updating react-scripts to the latest version, 5.0.1, as of now, fixed it for me.

1. edited package.json: "react": "^17.0.1", "react-dom": "^17.0.1", "react-scripts": "5.0.1", "
2. npm i

Adding react-error-overlay to devDependencies fixed it for me.

I tried all of these and it didn’t work, but then I tried installing with yarn and that worked. npm doesn’t support resolutions so the instructions to npm install I believe were a mistake, they meant to run yarn

@EvaGarzonBeltran and whoever else is having “process not defined error”. If the steps outlined previously did not work for you (as it didn’t work for me), and you are using NPM, then you need to use “overrides” instead of “resolutions” within your package.json. Also, my npm version was below 8.3 and therefore the “overrides” field was not being read. So you’ll need to upgrade your npm to at least 8.3.

Then go ahead and follow the steps again outlined earlier in this thread (restart your docker container as well if applicable). I was able to figure this out from following this stackoverflow question.

If this still doesn’t fix it and you’ve completely reinstalled all your modules and package lock, then I would suggest upgrading to react scripts 5 since that also seems to solve the issue.

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.

Hope this helps!!

this does not work for me

@EvaGarzonBeltran @aldipee If nothing works out, I guess the one thing you can do is override the css and call it out as display none. But am not sure if this is the right thing to do.

The solution of install react-error-overlay didn’t work for me and neither did the update to version 5 of react-scripts (the application doesn’t start correctly). The iframe keeps showing up every time I make a code change.

have you been able to solve this? I have exact problem

@kirannambiar12 Also worked for me!

Also worked for me!

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.

Hope this helps!!

Worked for me , thanks a bunch.