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

user_16610359 0
Viewed 7780

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.

enter image description here

create-react-app reactjs iframe html javascript
6 Answers

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

user_166103590
user_15130830

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

user_182741350

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

 iframe {
    display: none;
}
user_114298460

I didn't want to disable all the iframes on a page, so I use this:

body > iframe {
  pointer-events: none;
}
user_43462360

Please check first if there are any errors or warnings on importing modules or images or others types. Also there may be any packages or modules installed which is old version or have warnings or errors. You may find it on console. After fixing that, hopefully it will fixed.

I found fixed on me.

user_51722690
Related