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

Question

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

BROWSER=none
SKIP_PREFLIGHT_CHECK=true
INLINE_RUNTIME_CHUNK=false

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

注入的 iframe 如下：

BROWSER=none
SKIP_PREFLIGHT_CHECK=true
INLINE_RUNTIME_CHUNK=false

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

Answer 1

这实际上是 create-react-app 中使用的一个已知错误react-scripts。

他们显然正在修复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

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

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

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