Create React App开发热重载后注入最高z-index iframe阻塞交互如何解决

解决方案 #

方案1：全局CSS直接屏蔽（最快捷） #

直接在项目全局样式文件（如index.css、App.css）中加入以下样式，强制隐藏该iframe，不影响热更新逻辑：

/* 适配CRA热更新注入的顶层遮罩iframe */
iframe[style*="z-index: 2147483647"] {
  /* 直接隐藏 */
  display: none !important;
  /* 若需要保留iframe功能仅避免遮挡，可替换为下行配置 */
  /* z-index: -999 !important; */
}

方案2：禁用热更新错误遮罩层 #

该iframe本质是CRA内置的react-error-overlay组件，用于开发环境展示编译/运行时错误，部分异常场景下热更新成功后未自动隐藏。可在项目入口文件（如src/index.js）最顶部加入以下代码，直接禁用该遮罩层的弹出逻辑：

if (process.env.NODE_ENV === 'development') {
  // 覆写错误遮罩全局钩子，禁用弹窗
  window.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__ = {
    show: () => {},
    hide: () => {}
  }
}

方案3：修正跨域触发的异常注入 #

如果上述两种方案无效，大概率是热更新socket连接跨域导致的注入异常，可在.env配置文件中添加统一的HOST配置，和你本地访问项目的域名保持一致即可：

# 示例：统一用localhost访问
HOST=localhost
# 如需局域网可访问可配置为0.0.0.0
# HOST=0.0.0.0

以上方案均仅作用于开发环境，不会对生产构建产物产生任何影响。

内容的提问来源于stack exchange，提问作者Marcilio Leite