时间戳

首页 > 解决方案 > 更改后重新加载时使用最大 z-index 反应注入 iframe（开发）

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

问题描述

我有一个带有以下 .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 吗？

标签： reactjscreate-react-app

解决方案

这实际上是一个已知的 bug 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，但似乎已关闭）。

推荐阅读