Chrome 在开发模式下,reactjs应用程序中注入了意外的iframe

xxhby3vn  于 2023-01-06  发布在  Go
关注(0)|答案(2)|浏览(118)

我有一个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真的很烦人,因为会阻止整个页面的点击。

cgvd09ve

cgvd09ve1#

    • TL; DR**

您是否检查过控制台是否有未捕获的错误从React应用程序外部发出?这似乎发生在开发构建期间,当create-react-app的错误捕获机制感到困惑时。

    • 更长的推测**

我也看到了这一点。这不会是一个完整的答案,但可能会帮助你找到你这边的错误。
看起来这个覆盖是create-react-app错误捕获机制出错了。在我们的例子中,有一个错误是由完全在React应用程序代码之外的<script>标记引发的。它很可能是由Google Tag Manager SDK生成并附加到DOM的:

<script type="text/javascript" id="">fbq("trackCustom","Purchase Successful - Free");</script>

我们确实触发了这个特定的事件,但实现细节对我们的React应用是隐藏的。fbk在我们的开发环境中未定义(与Facebook跟踪相关),因此它会抛出ReferenceError,您所描述的覆盖层会弹出。
至于为什么create-react-app生成一个 * 完全透明的边缘到边缘的空iframe,阻止所有的点击 * 我不知道。

qhhrdooz

qhhrdooz2#

我在每次热加载时都遇到过这种情况,阻止了Chrome Devtools中对DOM的检查。当这种情况发生时,也会记录一个控制台错误Uncaught ReferenceError: process is not defined
我的修复方法是添加此开发依赖项

"devDependencies": {
    "react-error-overlay": "6.0.9"
  },

并重新安装依赖项。
Reference: https://github.com/facebook/create-react-app/issues/11773#issuecomment-995933869

相关问题