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

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

[LukeSamkharadze]

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