react process is not defined，全屏iframe覆盖问题_react路由跳转出现iframe挡住

问题

在运行时，浏览器控制台报错：process is not defined，并且会在页面创建个全屏iframe，阻止页面交互，头痛…

解决

固化react-error-overlay版本,下载包

npm i --save-exact react-scripts@4.0.3
npm i --save-dev react-error-overlay@6.0.9
1
2

package.json添加以下代码

  "resolutions": {
    "react-error-overlay": "6.0.9"
  },
  "flat": true
1
2
3
4

重新运行项目即可

解决全屏覆盖iframe问题

通过查阅相关资料发现是react-scripts存在的一个bug，他们在v5.0.1修复，将react-scripts升级至 v5.0.1 即可

升级版本代价比较大，如果只是想解决iframe问题，加上全局样式选择器把iframe隐藏

body>iframe[style*="2147483647"]:not([id="webpack-dev-server-client-overlay"]) {
  display: none;
}

1
2
3
4