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

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?

reactjs create-react-app

Solution 1:^[1]

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.

Solution 2:^[2]

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).

Solution 3:^[3]

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:

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Marcilio Leite
Solution 2	Doug
Solution 3	Adam

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]