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

Question

I recently did a global install of create-react-app and am having an issue where sometimes, when I'm working on a project, instead of editing directly what I have rendered in , it creates this container around the entire app.

Upon further inspection it looks like it is an which is rendered in the browswer as this:

<iframe style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; border: none; z-index: 2147483647;"></iframe>

I have screenshotted below what this ends up looking like in my app (the iframe is the orange text on the right), but it's super annoying and I've deleted the css props and cannot imagine what is causing this container around my app.

Has anyone else come across this? I have to delete this iframe to edit the elements directly from the browser but can't think why this is rendering each time I load the app in the browser.

Answer 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 😊