Hot Reload Fails, DOM adds an additional iframe containing entire contents of the html DOM element

[jake-engel]

Describe the bug

Everytime I save my code and hot reload happens, I am then unable to interact with the application (every component becomes unclickable). Upon further inspection of the DOM, I noticed that there was an iframe added within the document body which contains the entire HTML root, as well some various JS (see image below). If I remove this added iframe I am then able to interact with the application again (and hot reloads will work as normal following the removal).

There are no console errors, or warnings corresponding to this issue

Did you try recovering your dependencies?

Yes, I have tried removing all my dependency files multiple times, but still run into this issue. I am running yarn version 1.22.15 and this is within a project using yarn workspaces.

Which terms did you search for in User Guide?

Hot reload, iframe

Environment

  current version of create-react-app: 4.0.3
  running from /Users/-----/.config/yarn/global/node_modules/create-react-app

  System:
    OS: macOS 12.0.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 14.18.2 - ~/.nvm/versions/node/v14.18.2/bin/node
    Yarn: 1.22.15 - ~/.yarn/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.18.2/bin/npm
  Browsers:
    Chrome: 96.0.4664.110
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.1
  npmPackages:
    react:  17.0.2 (16.14.0)
    react-dom:  17.0.2 (16.14.0)
    react-scripts:  4.0.3 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

(Write your steps here:)

1. Run yarn start and wait for application to load
2. Update the code on any component and hit 'save'
3. Try to interact with the application after hitting save

Expected behavior

Hot reload should work as expected and no iframe should be added, I should be able to interact with the application immediately

Actual behavior

Application becomes non-interactive, iframe is added to DOM

[kirannambiar12]

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]

Worked for me! Thanks a bunch

[therealnagaka]

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

[flaviodelgrosso]

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

[quisido]

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.

[talhabinkhalil]

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.

[rich-97]

Also worked for me!

[abazunts]

@kirannambiar12 Also worked for me!

[ssthil]

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

[EvaGarzonBeltran]

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.

[aldipee]

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

[EvaGarzonBeltran]

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

Not yet :(

[atulbhatt-system32]

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 as I tried to resolve the same issue in my 3 colleagues system.
For me I followed all the steps.
But then I tried the same in my colleagues system I just added react-error-overlay in the package.json and did a npm install react-error-overlay@6.0.9 and finally all left was npm start.
And my friends, it worked.

[leonnleite]

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

[kirannambiar12]

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

[Nurpeyis]

Works for me as well as

[joneldiablo]

not working for me =(

[VLeads]

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

For 2-3 days this solution worked. But now it is not working. I even didn't installed any new package !!

[damian66]

I can confirm that it worked for me. I added the react-error-overlay package both to resolutions and devDependencies and had to reinstall packages.

[nicco-b]

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

[lcundiff]

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

[draco-malfoy]

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.

[mknayan]

Please check first if there are any errors on importing modules or images. You may find it on console. After fixing that, hopefully it will fixed.

I found fixed on me.

[EvaGarzonBeltran]

At the end I was able to fix it by updating react-script. The error was in another library (ramdonstring) that was incompatible with the new version and made it impossible to start the app.

[scott-cornwell]

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

[kamaladenalhomsi]

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

[LukeSamkharadze]

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

[kg-currenxie]

I get this error when using responsive mode in Chrome

Non-responsive works fine

[taofeek-ob]

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

[devChrisho]

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

same. didn't work for me.
react-scripts 4.0.3
react-error-overlay 6.0.9

[mwsoofy]

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

Works like a charm.