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

Question

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?

Answer 1

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