CODEWITHSUNDEEP
reactjscreate-react-app
Marcilio Leite
Marcilio Leite

Reputation: 1277

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?

Upvotes: 38

Views: 22886

Answers (5)

Ahmad Elswerkey
Ahmad Elswerkey

Reputation: 95

A quick solution with css:

body > iframe[style*='2147483647']{
  display: none;
}
  • "2147483647" is the z-index value that I found in my case, not sure if it would change for each application.

Upvotes: 4

Tohirul Islam
Tohirul Islam

Reputation: 404

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

Uncaught ReferenceError: process is not defined.

I downgraded from react18 to react17.0.2 to work on a certain project. I suddenly faced this issue. I had also downgraded my react-scripts to 4.0.2 `

{
    "name": "e-commerce-client-side",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@react-icons/all-files": "^4.1.0",
        "@reduxjs/toolkit": "^1.8.6",
        "axios": "^1.1.2",
        "react": "^17.0.2",
        "react-alert": "^7.0.3",
        "react-alert-template-basic": "^1.0.2",
        "react-dom": "^17.0.2",
        "react-font-loader": "^2.0.0",
        "react-helmet": "^6.1.0",
        "react-icons": "^4.4.0",
        "react-redux": "^8.0.4",
        "react-router-dom": "^5.0.1",
        "redux": "^4.2.0",
        "redux-devtools-extension": "^2.13.9",
        "redux-logger": "^3.0.6",
        "redux-thunk": "^2.4.1",
        "web-vitals": "^3.0.3"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "preinstall": "npx npm-force-resolutions"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "resolutions": {
        "//": "See https://github.com/facebook/create-react-app/issues/11773",
        "react-error-overlay": "6.0.9"
    },
    "devDependencies": {
        "@testing-library/jest-dom": "5.11.4",
        "@testing-library/react": "11.1.0",
        "@testing-library/user-event": "12.1.10",
        "react-scripts": "^4.0.2"
    }
}

this is what my package.json looks like by the time I faced this error. So as you can see I added

   "resolutions": {
        "//": "See https://github.com/facebook/create-react-app/issues/11773",
        "react-error-overlay": "6.0.9"
    },

`And it clearly solved my problem

Upvotes: 0

Adam Jenkins
Adam Jenkins

Reputation: 55792

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

Upvotes: 10

Doug
Doug

Reputation: 1724

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

Upvotes: 40

Marcilio Leite
Marcilio Leite

Reputation: 1277

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.

Upvotes: 26

Related Questions