Its First time im asking a question, so not much idea how to describe/write it.
I am working in a react project (making clons for learning purpose). Watching video tutorials and first time use firebase and redux. After making much progress, I counter the problem, in which when I save my work, local host 3000 doesn't refresh. I know there are lot of answers, I tried all but they didn't work for me.
But the main issue is, In my developer tool i see
<iframe style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; border: none; z-index: 2147483647;"></iframe>
Within this, there is #document and inside of it, <html> then <head> and <body>.
I didn't know what is this and the reason why it's showing up. Then i search, what is iframe, but i never use such thing i my project. And after a lot of research how to remove it. I didn't find the answer and way to do it Screen shot of my developer tool.
I can see all my components but they don't respond to me E.g can't take inputs, no hover effects etc. But when i manually delete <iframe> from dev tool, it works fine.
The iframe is used by react to inject changes to the dom during hotreload. Sometimes it fails and doesn't remove the iframe, thus the behavior.
A fix would be to add:
"resolutions": {
"react-error-overlay": "6.0.9"
},
To your package.json immediately after the scripts, delete package.lock or yarn.lock files, install packages again.