在更改后重新加载时用最大 z-index 注入 iframe（开发）

Question

我有一个包含以下 .env 文件的 Create React App：

BROWSER=none
SKIP_PREFLIGHT_CHECK=true
INLINE_RUNTIME_CHUNK=false

当我使用 yarn start 启动应用程序时，在任何代码更改后，服务器都会在不刷新页面和丢弃页面状态的情况下进行替换，但它会在我的 HTML 中注入一个 iframe，其中最大 z-index，所以我无法进行任何交互，比如点击。

注入的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

找到根本原因：这个iframe被热加载器用来在DOM中注入代码。它在注射后立即附加和删除。如果发生这种情况时发生错误，热加载程序将中断，而不是删除 iframe。

在我的例子中，这是一个 Content-Security-Policy 错误，导致在注入过程中出错。

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

Answer 2

这实际上是 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 和软件包-lock.json 或 yarn.lock，然后重新安装您的软件包。

这是一个 link 未决问题：https://github.com/facebook/create-react-app/issues/11773（也是 11771，但它似乎已关闭）。

Answer 3

有同样的问题。在我的具体情况下，根本原因是因为我使用 process.env 作为默认道具：

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

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

在更改后重新加载时用最大 z-index 注入 iframe（开发）

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

reactjs

create-react-app