36

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?

5 Answers 5

40

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

1
  • 7
    For anyone from times after Dec 16 2021, you should put this line into "devDependencies" instead of "resolutions" and run npm i
    – Nick
    Apr 27, 2022 at 12:07
25

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.

4
  • We will have to use separate CSP rules based on environments. For development env, we need to remove the problem causing CSP attribute values. It is recommended to keep the CSP rules for prod environment
    – CodeBuggy
    Nov 15, 2021 at 12:47
  • 2
    Hey, can you help me and see what are those rules you are referring to? I am having the same issue, should I do it in the app.get in the server.js Dec 22, 2021 at 20:33
  • For me the cause was using an env var as a default prop. Jan 21, 2022 at 12:33
  • In my case it was SKIP_PREFLIGHT_CHECK=true in .env file in React project in root directory, which I changed to false, and then the iframe injection in bottom DOM went away, thanks. May 27, 2022 at 10:46
9

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

3

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.
1
  • the z-index not changing so far with multiple react projects Feb 23 at 10:16
0

<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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.