Create-React-App creates this that prevents me from clicking or editing directly the app unless I delete it in the elements browswer editor</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2021-12-27T19:17:38.717" class="fromnow">Dec 27 '21 at 19:17</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2023-01-31T18:33:06.477" datetime="2023-01-31T18:33:06.477">Jan 31 '23 at 18:33</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 16,308 times"> <span class="fc-light mr2">Viewed</span> 1.6k times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="70499543" data-ownerid="16610359" data-score="29"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="70499543"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="29">29</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value="0">0</div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>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.</p> <p>Upon further inspection it looks like it is an which is rendered in the browswer as this:</p> <pre class="lang-html prettyprint-override"><code><iframe style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; border: none; z-index: 2147483647;"></iframe> </code></pre> <p>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.</p> <p>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.</p> <p><a class="external-link" href="https://i.stack.imgur.com/mxMsX.png" rel="noreferrer"><img alt="enter image description here" src="../../images/3863743703.webp"/></a></p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/reactjs" class="post-tag js-gps-track" title="show questions tagged 'reactjs'" rel="tag">reactjs</a> <a href="../../questions/tagged/iframe" class="post-tag js-gps-track" title="show questions tagged 'iframe'" rel="tag">iframe</a> <a href="../../questions/tagged/create-react-app" class="post-tag js-gps-track" title="show questions tagged 'create-react-app'" rel="tag">create-react-app</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Dec 27 '21 at 19:17">asked Dec 27 '21 at 19:17</time> <a href="../../users/16610359/interstellarx" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/16610359.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="InterstellarX" /> </a> <div class="s-user-card--info"> <a href="../../users/16610359/interstellarx" class="s-user-card--link">InterstellarX</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">712</li> <li class="s-award-bling s-award-blinggold" title="1 gold badge">1</li> <li class="s-award-bling s-award-blingsilver" title="8 silver badge">8</li> <li class="s-award-bling s-award-blingbronze" title="16 bronze badge">16</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-70499543" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="70499543" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-124621945" class="comment js-comment " data-comment-id="124621945" data-comment-owner-id="9098350" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment124621945_70499543"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">This is a longshot and probably totally off, but maybe you have some chrome extension that adds an iframe. Is the behavior the same when you run in an incognito tab (where extensions are disabled)?</span> – <a href="../../users/9098350/5eb" title="14,798 reputation" class="comment-user ">5eb</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/70499543/create-react-app-creates-this-iframe-that-prevents-me-from-clicking-or-editing#comment124621945_70499543"><span title="2021-12-27T19:28:42.317 License: CC BY-SA 4.0" class="relativetime-clean">Dec 27 '21 at 19:28</span></a></span> </div> </div> </li> <li id="comment-124622103" class="comment js-comment " data-comment-id="124622103" data-comment-owner-id="16610359" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment124622103_70499543"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Thanks for that suggestion, @BasvanderLinden! It seems like it's a useEffect hook around my project...I still need to debug it more. It has an Init and a window parameter on it, so it might be an issue with something that needs to load before accessing the elements of the project. I'm getting warmer though!</span> – <a href="../../users/16610359/interstellarx" title="712 reputation" class="comment-user owner">InterstellarX</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/70499543/create-react-app-creates-this-iframe-that-prevents-me-from-clicking-or-editing#comment124622103_70499543"><span title="2021-12-27T19:39:32.693 License: CC BY-SA 4.0" class="relativetime-clean">Dec 27 '21 at 19:39</span></a></span> </div> </div> </li> <li id="comment-124624648" class="comment js-comment " data-comment-id="124624648" data-comment-owner-id="13684215" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment124624648_70499543"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Does this answer your question? [process is not defined on hot reload](https://stackoverflow.com/questions/70357360/process-is-not-defined-on-hot-reload)</span> – <a href="../../users/13684215/toki" title="936 reputation" class="comment-user ">toki</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/70499543/create-react-app-creates-this-iframe-that-prevents-me-from-clicking-or-editing#comment124624648_70499543"><span title="2021-12-27T22:31:59.760 License: CC BY-SA 4.0" class="relativetime-clean">Dec 27 '21 at 22:31</span></a></span> </div> </div> </li> <li id="comment-125068208" class="comment js-comment " data-comment-id="125068208" data-comment-owner-id="7569308" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment125068208_70499543"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">I'm seeing the exact same thing but it only appears on certain components using React.lazy. Still trying to figure out exactly what's going on.</span> – <a href="../../users/7569308/jsonp" title="455 reputation" class="comment-user ">jsonp</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/70499543/create-react-app-creates-this-iframe-that-prevents-me-from-clicking-or-editing#comment125068208_70499543"><span title="2022-01-17T19:17:22.800 License: CC BY-SA 4.0" class="relativetime-clean">Jan 17 '22 at 19:17</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">9 Answers<span style="display:none;" itemprop="answerCount">9</span></h2> </div> </div> </div> <a name="70807924"></a> <div id="answer-70807924" class="answer accepted-answer" data-answerid="70807924" data-ownerid="16610359" data-score="27" itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="70807924"> <button class="js-vote-up-btn grid--cell s-btn s-btn__unset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="27">27</div> <div class="js-accepted-answer-indicator grid--cell fc-green-500 py6 mtn8"><div class="ta-center"><svg aria-hidden="true" class="svg-icon iconCheckmarkLg" width="36" height="36" viewBox="0 0 36 36"><path d="m6 14 8 8L30 6v8L14 30l-8-8v-8z"></path></svg></div></div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>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 </p> <p>I have found two solutions that can solve this, one with a <code>.env</code> file that sometimes works, and the other solution is with <code>css</code> that I want to say always will solve this issue.</p> <h1>Fix #1: .env solution</h1> <p>In the root folder level (the same level as the .gitignore, package.json, README.md, yarn.lock, /src), create a <code>.env</code> file and include the following in it:</p> <pre class="lang-sh prettyprint-override"><code>FAST_REFRESH=false </code></pre> <p>This sometimes works, but if this doesn't work after awhile, proceed to the second solution below.</p> <h1>Fix #2: <code>App.css</code> fix to disable pointer-events for iframe</h1> <p>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.</p> <p>In your global styles file, add the following property to an iframe element: <code>pointer-events: none</code>. 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.</p> <pre class="lang-css prettyprint-override"><code>iframe { pointer-events: none; } </code></pre> <p>Hopefully one of these solutions saves you hours of research and time </p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jan 21 '22 at 21:43">answered Jan 21 '22 at 21:43</time> <a href="../../users/16610359/interstellarx" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/16610359.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="InterstellarX" /> </a> <div class="s-user-card--info"> <a href="../../users/16610359/interstellarx" class="s-user-card--link">InterstellarX</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">712</li> <li class="s-award-bling s-award-blinggold" title="1 gold badge">1</li> <li class="s-award-bling s-award-blingsilver" title="8 silver badge">8</li> <li class="s-award-bling s-award-blingbronze" title="16 bronze badge">16</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-70807924" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="70807924" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-125256000" class="comment js-comment " data-comment-id="125256000" data-comment-owner-id="2168144" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment125256000_70807924"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@toki 's answer above fixed this for me</span> – <a href="../../users/2168144/gene-higgins" title="525 reputation" class="comment-user ">Gene Higgins</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/70499543/create-react-app-creates-this-iframe-that-prevents-me-from-clicking-or-editing#comment125256000_70807924"><span title="2022-01-25T17:02:58.917 License: CC BY-SA 4.0" class="relativetime-clean">Jan 25 '22 at 17:02</span></a></span> </div> </div> </li> <li id="comment-126360699" class="comment js-comment " data-comment-id="126360699" data-comment-owner-id="12719767" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment126360699_70807924"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">fix 2 worked for me, but i wonder why this iframe even exist in my project? can't we remove that permanently?</span> – <a href="../../users/12719767/nivethan" title="2,339 reputation" class="comment-user ">Nivethan</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/70499543/create-react-app-creates-this-iframe-that-prevents-me-from-clicking-or-editing#comment126360699_70807924"><span title="2022-03-16T05:33:49.963 License: CC BY-SA 4.0" class="relativetime-clean">Mar 16 '22 at 05:33</span></a></span> </div> </div> </li> <li id="comment-126608453" class="comment js-comment " data-comment-id="126608453" data-comment-owner-id="6116921" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment126608453_70807924"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Not only this ruins the click/devtools experience, that iframe also soemtimes throws an ambigous errors that crashes the whole app, it there a way to completely disable this? Another reason to stay away from create react app that only gives more pain by adding suspicious behavior to app build and configure webpack yourself.</span> – <a href="../../users/6116921/fires3as0n" title="421 reputation" class="comment-user ">fires3as0n</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/70499543/create-react-app-creates-this-iframe-that-prevents-me-from-clicking-or-editing#comment126608453_70807924"><span title="2022-03-27T16:25:17.533 License: CC BY-SA 4.0" class="relativetime-clean">Mar 27 '22 at 16:25</span></a></span> </div> </div> </li> <li id="comment-129043034" class="comment js-comment " data-comment-id="129043034" data-comment-owner-id="4595005" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment129043034_70807924"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">```iframe``` answer fixed it for me. Helpful if you don't want to revert back to a different react-scripts version, as the github solution below suggests.</span> – <a href="../../users/4595005/j-e-c" title="2,616 reputation" class="comment-user ">J.E.C.</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/70499543/create-react-app-creates-this-iframe-that-prevents-me-from-clicking-or-editing#comment129043034_70807924"><span title="2022-07-21T09:41:26.543 License: CC BY-SA 4.0" class="relativetime-clean">Jul 21 '22 at 09:41</span></a></span> </div> </div> </li> <li id="comment-129477436" class="comment js-comment " data-comment-id="129477436" data-comment-owner-id="1850555" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment129477436_70807924"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">CSS simply bypasses the issues TBH. But `iframe` is still there. And the app process is still terminated. I wonder, someone has found actual fix.</span> – <a href="../../users/1850555/suresh-kumar-mukhiya" title="598 reputation" class="comment-user ">Suresh KUMAR Mukhiya</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/70499543/create-react-app-creates-this-iframe-that-prevents-me-from-clicking-or-editing#comment129477436_70807924"><span title="2022-08-11T06:31:17.910 License: CC BY-SA 4.0" class="relativetime-clean">Aug 11 '22 at 06:31</span></a></span> </div> </div> </li> <li id="comment-129494746" class="comment js-comment " data-comment-id="129494746" data-comment-owner-id="1513083" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment129494746_70807924"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Ideally, this shouldn't be the accepted answer. this one solves the root cause: https://stackoverflow.com/a/71069031/1513083 without patching anything unnecessarily</span> – <a href="../../users/1513083/akrush95" title="1,381 reputation" class="comment-user ">AKrush95</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/70499543/create-react-app-creates-this-iframe-that-prevents-me-from-clicking-or-editing#comment129494746_70807924"><span title="2022-08-11T20:23:02.817 License: CC BY-SA 4.0" class="relativetime-clean">Aug 11 '22 at 20:23</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="71069031"></a> <div id="answer-71069031" class="answer " data-answerid="71069031" data-ownerid="1513083" data-score="14" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="71069031"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="14">14</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I haven't tried it, but the accepted answer looks like it will just disable fast refresh all together which is not ideal so..</p> <p>Take a look at this github issue response</p> <p><a class="external-link" href="https://github.com/facebook/create-react-app/issues/11880#issuecomment-1005409614" rel="noreferrer">https://github.com/facebook/create-react-app/issues/11880#issuecomment-1005409614</a></p> <p>Specifically I only needed</p> <pre><code>// package.json "resolutions": { "react-error-overlay": "6.0.9" }, </code></pre> <p>Make sure to run <code>yarn</code> or <code>npm install</code> after updating</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2022-03-01T16:57:42.327" class="relativetime">Mar 01 '22 at 16:57</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">AKrush95</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Feb 10 '22 at 16:46">answered Feb 10 '22 at 16:46</time> <a href="../../users/1513083/akrush95" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1513083.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="AKrush95" /> </a> <div class="s-user-card--info"> <a href="../../users/1513083/akrush95" class="s-user-card--link">AKrush95</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1,381</li> <li class="s-award-bling s-award-blinggold" title="6 gold badges">6</li> <li class="s-award-bling s-award-blingsilver" title="18 silver badges">18</li> <li class="s-award-bling s-award-bling__bronze" title="35 bronze badges">35</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-71069031" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="71069031" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-127595555" class="comment js-comment " data-comment-id="127595555" data-comment-owner-id="377205" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment127595555_71069031"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">I can confirm that this works. Make sure you have react-error-overlay@6.0.9 and not 6.0.10. The problem was that react-scripts@4.0.3 does use react-error-overlay@6.0.9 in its package.json. However, since 6.0.10 is marked as a patch, npm does use v6.0.10 instead of v6.0.9.</span> – <a href="../../users/377205/ctown4life" title="835 reputation" class="comment-user ">ctown4life</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/70499543/create-react-app-creates-this-iframe-that-prevents-me-from-clicking-or-editing#comment127595555_71069031"><span title="2022-05-12T16:09:27.267 License: CC BY-SA 4.0" class="relativetime-clean">May 12 '22 at 16:09</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="71215516"></a> <div id="answer-71215516" class="answer " data-answerid="71215516" data-ownerid="18274135" data-score="2" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="71215516"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="2">2</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I had this problem because I had some errors in my code, and after I fixed all the lint errors, the iframe disappeared <a class="external-link" href="https://i.stack.imgur.com/F0Vfe.png" rel="nofollow noreferrer">see the detail here</a></p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2022-04-13T15:18:35.623" class="relativetime">Apr 13 '22 at 15:18</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">lily</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Feb 22 '22 at 03:20">answered Feb 22 '22 at 03:20</time> <a href="../../users/18274135/lily" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/18274135.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="lily" /> </a> <div class="s-user-card--info"> <a href="../../users/18274135/lily" class="s-user-card--link">lily</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">21</li> <li class="s-award-bling s-award-bling__bronze" title="3 bronze badges">3</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-71215516" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="71215516" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-128185094" class="comment js-comment " data-comment-id="128185094" data-comment-owner-id="2576278" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment128185094_71215516"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">This is because the iframe is the react error overlay misbehaving, so if you have errors that cause the error overlay to render it triggers the iframe to appear. Fixing the errors will prevent the overlay from trying to appear, but the overlay is still not working properly when it renders the empty iframe</span> – <a href="../../users/2576278/ironsean" title="1,520 reputation" class="comment-user ">IronSean</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/70499543/create-react-app-creates-this-iframe-that-prevents-me-from-clicking-or-editing#comment128185094_71215516"><span title="2022-06-09T19:00:04.067 License: CC BY-SA 4.0" class="relativetime-clean">Jun 09 '22 at 19:00</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="71505665"></a> <div id="answer-71505665" class="answer " data-answerid="71505665" data-ownerid="4346236" data-score="2" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="71505665"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="2">2</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I didn't want to disable all the iframes on a page, so I use this:</p> <pre><code>body > iframe { pointer-events: none; } </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Mar 17 '22 at 00:14">answered Mar 17 '22 at 00:14</time> <a href="../../users/4346236/anton-matiash" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/4346236.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Anton Matiash" /> </a> <div class="s-user-card--info"> <a href="../../users/4346236/anton-matiash" class="s-user-card--link">Anton Matiash</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">172</li> <li class="s-award-bling s-award-blingsilver" title="2 silver badges">2</li> <li class="s-award-bling s-award-blingbronze" title="6 bronze badges">6</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="71484716"></a> <div id="answer-71484716" class="answer " data-answerid="71484716" data-ownerid="11429846" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="71484716"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>you can add this to your css, this will hide the iframe and prevent it affecting your work</p> <pre><code> iframe { display: none; } </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Mar 15 '22 at 15:20">answered Mar 15 '22 at 15:20</time> <a href="../../users/11429846/paa-kofi-aidoo" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/11429846.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="PAA-KOFI AIDOO" /> </a> <div class="s-user-card--info"> <a href="../../users/11429846/paa-kofi-aidoo" class="s-user-card--link">PAA-KOFI AIDOO</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">43</li> <li class="s-award-bling s-award-bling__bronze" title="1 bronze badges">1</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-71484716" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="71484716" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-126746916" class="comment js-comment " data-comment-id="126746916" data-comment-owner-id="8698679" data-comment-score="2"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">2</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment126746916_71484716"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">this will disable all `iframes` might be a bit overkill</span> – <a href="../../users/8698679/jonathan-sanchez" title="7,316 reputation" class="comment-user ">Jonathan Sanchez</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/70499543/create-react-app-creates-this-iframe-that-prevents-me-from-clicking-or-editing#comment126746916_71484716"><span title="2022-04-02T17:03:24.007 License: CC BY-SA 4.0" class="relativetime-clean">Apr 02 '22 at 17:03</span></a></span> </div> </div> </li> <li id="comment-129963245" class="comment js-comment " data-comment-id="129963245" data-comment-owner-id="11429846" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment129963245_71484716"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">the ones you want to see, add `display: block or flex` to the style, problem solved</span> – <a href="../../users/11429846/paa-kofi-aidoo" title="43 reputation" class="comment-user ">PAA-KOFI AIDOO</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/70499543/create-react-app-creates-this-iframe-that-prevents-me-from-clicking-or-editing#comment129963245_71484716"><span title="2022-09-04T01:21:24.620 License: CC BY-SA 4.0" class="relativetime-clean">Sep 04 '22 at 01:21</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="72513363"></a> <div id="answer-72513363" class="answer " data-answerid="72513363" data-ownerid="5172269" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="72513363"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>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.</p> <p>I found fixed on me.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2022-06-10T05:02:37.657" class="relativetime">Jun 10 '22 at 05:02</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">Md. Khairullah Nayan</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jun 06 '22 at 05:23">answered Jun 06 '22 at 05:23</time> <a href="../../users/5172269/md-khairullah-nayan" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/5172269.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Md. Khairullah Nayan" /> </a> <div class="s-user-card--info"> <a href="../../users/5172269/md-khairullah-nayan" class="s-user-card--link">Md. Khairullah Nayan</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">429</li> <li class="s-award-bling s-award-blingsilver" title="3 silver badges">3</li> <li class="s-award-bling s-award-blingbronze" title="6 bronze badges">6</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="73844829"></a> <div id="answer-73844829" class="answer " data-answerid="73844829" data-ownerid="17137639" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="73844829"> <button class="js-vote-up-btn grid--cell s-btn s-btn__unset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Update your BrowserList in package.json file with this: <code>"browserslist": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ]</code></p> <p>This was a fix for me in same scenario.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Sep 25 '22 at 13:22">answered Sep 25 '22 at 13:22</time> <a href="../../users/17137639/fahad-hussain" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/17137639.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Fahad Hussain" /> </a> <div class="s-user-card--info"> <a href="../../users/17137639/fahad-hussain" class="s-user-card--link">Fahad Hussain</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">121</li> <li class="s-award-bling s-award-blingsilver" title="1 silver badges">1</li> <li class="s-award-bling s-award-blingbronze" title="2 bronze badges">2</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="74502897"></a> <div id="answer-74502897" class="answer " data-answerid="74502897" data-ownerid="111635" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="74502897"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>For anyone still encountering this issue (most likely by cloning a repo that is using an old version of <code>react-scripts</code>), you can fix it by updating <code>react-scripts</code> to <code>v5.0.1</code> (or later).</p> <pre><code>npm install --save react-scripts@5 </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Nov 19 '22 at 19:09">answered Nov 19 '22 at 19:09</time> <a href="../../users/111635/daniel-waltrip" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/111635.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Daniel Waltrip" /> </a> <div class="s-user-card--info"> <a href="../../users/111635/daniel-waltrip" class="s-user-card--link">Daniel Waltrip</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">2,530</li> <li class="s-award-bling s-award-blinggold" title="4 gold badges">4</li> <li class="s-award-bling s-award-blingsilver" title="25 silver badges">25</li> <li class="s-award-bling s-award-blingbronze" title="30 bronze badges">30</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="75301657"></a> <div id="answer-75301657" class="answer " data-answerid="75301657" data-ownerid="15684543" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="75301657"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>This worked for me:</p> <ol> <li>Remove your package-lock.json</li> <li>Remove your react-scripts dependency from your package.json</li> <li>Run <code>npm install --save react-scripts</code></li> </ol> <p><a href="../../a/74502897#74502897">https://stackoverflow.com/a/74502897/15684543</a></p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jan 31 '23 at 18:33">answered Jan 31 '23 at 18:33</time> <a href="../../users/15684543/jonathan-niemann" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/15684543.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Jonathan Niemann" /> </a> <div class="s-user-card--info"> <a href="../../users/15684543/jonathan-niemann" class="s-user-card--link">Jonathan Niemann</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> </div> </div> <div id="sidebar" class="show-votes" role="complementary" aria-label="sidebar"> <div class="module sidebar-linked"> <h4 id="h-linked">Linked</h4> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">4</div></a> <a href="../../questions/70769816/in-react-app-iframe-is-showing-up-in-developer-tools-elements" class="question-hyperlink">In React app, iframe is showing up in developer tools, elements</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">1</div></a> <a href="../../questions/75409292/why-is-my-cursor-pointer-disabled-on-button-after-refresh" class="question-hyperlink">Why is my cursor pointer disabled on <button> after refresh?</a> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>