更改后重新加载时以最大 z 索引响应注入 iframe（开发）

Question

我有一个带有以下 .env 文件的 Create React 应用程序：

BROWSER=none
SKIP_PREFLIGHT_CHECK=true
INLINE_RUNTIME_CHUNK=false

当我使用

yarn start

启动应用程序时，在更改任何代码后，服务器会在不刷新页面和丢弃页面状态的情况下进行替换，但它会在我的HTML中注入一个具有最大z索引的iframe，所以我无法进行任何交互，例如单击。

注入的iframe是这样的：

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

有什么方法可以避免这个 iframe 甚至它巨大的 z-index 阻塞所有页面吗？

Answer 1

这实际上是

react-scripts

中的一个已知错误，它在 create-react-app 中使用。

他们显然正在修复react-scripts v5.0.1，但将以下几行添加到你的package.json中将修复它：

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

所以你的 package.json 应该是这样的：

{
  "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"
  },
  ...
}

确保删除您的node_modules和package-lock.json或yarn.lock，然后重新安装您的软件包。

这里是未解决问题的链接：https://github.com/facebook/create-react-app/issues/11773（也是11771，但似乎已关闭）。

Answer 2

找到根本原因：这个iframe被热加载器用来向DOM中注入代码。注射后立即添加和移除。如果发生错误，热加载程序会中断，而不是删除 iframe。

就我而言，这是内容安全策略错误导致注入期间出现错误。

刚刚调整了我的应用程序中的策略，现在运行良好。

Answer 3

有同样的问题。在我的具体情况下，根本原因是因为我使用

process.env

作为默认道具：

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

这导致了以下错误和可怕的 iframe 死亡：

Answer 4

使用 css 的快速解决方案：

body > iframe[style*='2147483647']{
  display: none;
}

• “2147483647”是我在我的案例中找到的 z-index 值，不确定它是否会针对每个应用程序而改变。

Answer 5

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

我从react18降级到react17.0.2来处理某个项目。我突然面临这个问题。我还将我的反应脚本降级到 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"
    },

`它显然解决了我的问题

Answer 6

<iframe id="frame" src="https://ssl.app.appspot.com/" frameborder="0" style="display: block; position: fixed; height: 100%; width: 100%; inset: 0px; margin: 0px; z-index: 2147483647;"></iframe>