我有一个react应用程序,但大多数时候,当我在源代码中进行更改时,浏览器会重新加载新代码,但会在整个应用程序中将iframe注入应用程序
我已经检查了我的源代码,当然我不是自己做的,而且,我检查了我已经安装的Chrome扩展,基本上就是这些(复制所有URL,谷歌文档离线,Redux DevTools,Redux DevTools)
我在package.json文件中安装的所有库都是
{
"name": "react-ui-generator",
"version": "0.0.0",
"private": true,
"dependencies": {
"@aws-amplify/ui-react": "^1.2.6",
"@babel/core": "^7.14.6",
"@date-io/date-fns": "^1.3.13",
"@material-table/core": "~4.3.1",
"@material-table/exporters": "^1.0.12",
"@material-ui/core": "~4.12.3",
"@material-ui/icons": "~4.11.2",
"@material-ui/lab": "^4.0.0-alpha.60",
"@material-ui/pickers": "^3.3.10",
"@monsonjeremy/react-leaflet-core": "^1.1.1",
"@react-leaflet/core": "npm:@monsonjeremy/react-leaflet-core",
"@reduxjs/toolkit": "^1.6.0",
"@rjsf/core": "~3.1.0",
"@rjsf/material-ui": "~3.1.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"aws-amplify": "^4.2.0",
"axios": "^0.21.1",
"connected-react-router": "~6.9.1",
"date-fns": "^2.0.0-beta.5",
"formik": "^2.2.9",
"guid": "0.0.12",
"http-proxy-middleware": "^2.0.1",
"immutability-helper": "~3.1.1",
"isomorphic-ws": "^4.0.1",
"leaflet": "^1.7.1",
"lodash": "^4.17.21",
"material-ui-nested-menu-item": "^1.0.2",
"node-sass": "5.0.0",
"notistack": "^1.0.10",
"placeholder-loading": "^0.5.0",
"react": "^16.14.0",
"react-color": "^2.19.3",
"react-dom": "^16.14.0",
"react-leaflet": "npm:@monsonjeremy/react-leaflet@3.2.1",
"react-leaflet-markercluster": "^3.0.0-rc1",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-simple-oauth2-login": "^0.5.1",
"react-spring": "^9.3.1",
"rxjs": "^7.3.0",
"typescript": "^4.3.5",
"web-vitals": "^1.0.1",
"ws": "^7.5.3",
"yup": "^0.32.9"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
}
]
},
"browserslist": [
">0.2%",
"not dead",
"not op_mini all"
],
"devDependencies": {
"@storybook/addon-actions": "^6.3.12",
"@storybook/addon-essentials": "^6.3.12",
"@storybook/addon-links": "^6.3.12",
"@storybook/node-logger": "^6.3.12",
"@storybook/preset-create-react-app": "^3.2.0",
"@storybook/react": "^6.3.12",
"@types/leaflet": "^1.7.5",
"path": "^0.12.7",
"react-json-editor-ajrm": "^2.5.13",
"storybook": "^6.3.12",
"storybook-addon-material-ui": "^0.9.0-alpha.24",
"storybook-addon-mock": "^1.7.0"
}
}
而且我不认为它们中的任何一个在注入这个iframe。
我还可以查看哪些内容来修复/删除这个意外的iframe?
因为每次手动刷新页面或手动删除此iframe真的很烦人,因为会阻止整个页面的点击。
2条答案
按热度按时间cgvd09ve1#
您是否检查过控制台是否有未捕获的错误从React应用程序外部发出?这似乎发生在开发构建期间,当
create-react-app
的错误捕获机制感到困惑时。我也看到了这一点。这不会是一个完整的答案,但可能会帮助你找到你这边的错误。
看起来这个覆盖是
create-react-app
错误捕获机制出错了。在我们的例子中,有一个错误是由完全在React应用程序代码之外的<script>
标记引发的。它很可能是由Google Tag Manager SDK生成并附加到DOM的:我们确实触发了这个特定的事件,但实现细节对我们的React应用是隐藏的。
fbk
在我们的开发环境中未定义(与Facebook跟踪相关),因此它会抛出ReferenceError
,您所描述的覆盖层会弹出。至于为什么
create-react-app
生成一个 * 完全透明的边缘到边缘的空iframe,阻止所有的点击 * 我不知道。qhhrdooz2#
我在每次热加载时都遇到过这种情况,阻止了Chrome Devtools中对DOM的检查。当这种情况发生时,也会记录一个控制台错误
Uncaught ReferenceError: process is not defined
。我的修复方法是添加此开发依赖项
并重新安装依赖项。
Reference: https://github.com/facebook/create-react-app/issues/11773#issuecomment-995933869