Create-React-App creates this <iframe> that prevents me from clicking or editing directly the app unless I delete it in the elements browswer editor

Solution 1:

So after MUCH research and testing, I finally figured this out and I hope it can save anyone in the same situation I was in 😊

I have found two solutions that can solve this, one with a .env file that sometimes works, and the other solution is with css that I want to say always will solve this issue.

Fix #1: .env solution

In the root folder level (the same level as the .gitignore, package.json, README.md, yarn.lock, /src), create a .env file and include the following in it:

FAST_REFRESH=false

This sometimes works, but if this doesn't work after awhile, proceed to the second solution below.

Fix #2: App.css fix to disable pointer-events for iframe

This solution is what has saved me a bunch. Basically what this solution fixes is the wrapping iframe around the html files that exist in an app in the React.js template.

In your global styles file, add the following property to an iframe element: pointer-events: none. I then import this css file into my JSX page so that it will remove this iframe wrapper around the page. This will disable the iframe overlay and allow you to effectively click anywhere within the window frame.

iframe {
  pointer-events: none;
}

Hopefully one of these solutions saves you hours of research and time 😊

Solution 2:

I haven't tried it, but the accepted answer looks like it will just disable fast refresh all together which is not ideal so..

Take a look at this github issue response

https://github.com/facebook/create-react-app/issues/11880#issuecomment-1005409614

Specifically I only needed

// package.json

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

Make sure to run yarn or npm install after updating

Solution 3:

I had this problem because I had lint errors in my code, and after I fixed all the lint errors, the iframe disappeared see the detail here

Solution 4:

you can add this to your css, this will hide the iframe and prevent it affecting your work

 iframe {
    display: none;
}