React injecting iframe with max z-index on reload after changes (development)

user_1772832 0
Viewed 10508

I have a Create React App with the following .env file:

BROWSER=none
SKIP_PREFLIGHT_CHECK=true
INLINE_RUNTIME_CHUNK=false

When I launch the app with yarn start, after any code change, the server makes the replacement without refreshing page and discarding page state, but it injects an iframe in my HTML, with the max z-index, so I am unable to make any interaction, like a click.

The injected iframe is like:

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

Is there any way to avoid this iframe or even it's giant z-index that is blocking all the page?

create-react-app reactjs
4 Answers

This is actually a known bug in react-scripts, which is used in create-react-app.

They're apparently working on a fix for react-scripts v5.0.1, but adding the following lines to your package.json will fix it:

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

So your package.json should look something like this:

{
  "name": "whatever",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    ...
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "resolutions": {
    "react-error-overlay": "6.0.9"
  },
  ...
}

Make sure to delete your node_modules and package-lock.json or yarn.lock, and reinstall your packages.

Here's a link to the open issue: https://github.com/facebook/create-react-app/issues/11773 (also 11771, but it appears to be closed).

user_35501830

Found the root cause: This iframe is used by the hot loader to inject code in the DOM. It is appended and removed immediately after the injection. If an error occurs while this is happening, the hot loader breaks, not removing the iframe.

In my case, it was a Content-Security-Policy error causing an error during the injection.

Just adjusted my policies in my app and it's working fine now.

user_17728320

Had the same issue. In my specific case the root cause was because I was using a process.env as a default prop:

const MyComponent = ({someProp = process.env.SOME_VAR}) => {
  ...
}

This resulted in the following error and the dreaded iframe of death:

enter image description here

user_9549400

For me it got resolved after adding

import React from "react"

in App.tsx file and other components in which it was missing

user_176990650
Related