🐛 [BUG] 热更新会出现一个iframe挡住页面

[Capricair]

🐛 bug 描述

热更新会插入一个iframe挡住页面

📷 复现步骤 | Recurrence steps

1. 启动项目
2. 随便改个代码

🏞 期望结果 | Expected results

没有iframe遮挡问题

💻 复现代码 | Recurrence code

无

© 版本信息

• Ant Design Pro 版本: 6.0.0
• umi 版本: 4.x
• 浏览器环境: Chrome
• 开发环境: node 16.16.0

🚑 其他信息

无

[chenshuai2144]

排查下你的插件吧，我们项目中没找到这个库

[Capricair]

排查下你的插件吧，我们项目中没找到这个库

pro create 创建的什么都没改

{
  "name": "ant-design-pro",
  "version": "6.0.0",
  "private": true,
  "description": "An out-of-box UI solution for enterprise applications",
  "scripts": {
    "analyze": "cross-env ANALYZE=1 max build",
    "build": "max build",
    "deploy": "npm run build && npm run gh-pages",
    "dev": "npm run start:dev",
    "gh-pages": "gh-pages -d dist",
    "i18n-remove": "pro i18n-remove --locale=zh-CN --write",
    "postinstall": "max setup",
    "jest": "jest",
    "lint": "npm run lint:js && npm run lint:prettier && npm run tsc",
    "lint-staged": "lint-staged",
    "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ",
    "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src ",
    "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
    "lint:prettier": "prettier -c --write \"**/**.{js,jsx,tsx,ts,less,md,json}\" --end-of-line auto",
    "openapi": "max openapi",
    "prepare": "husky install",
    "prettier": "prettier -c --write \"**/**.{js,jsx,tsx,ts,less,md,json}\"",
    "preview": "npm run build && max preview --port 8000",
    "record": "cross-env NODE_ENV=development REACT_APP_ENV=test max record --scene=login",
    "serve": "umi-serve",
    "start": "cross-env UMI_ENV=dev max dev",
    "start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev max dev",
    "start:no-mock": "cross-env MOCK=none UMI_ENV=dev max dev",
    "start:pre": "cross-env REACT_APP_ENV=pre UMI_ENV=dev max dev",
    "start:test": "cross-env REACT_APP_ENV=test MOCK=none UMI_ENV=dev max dev",
    "test": "jest",
    "test:coverage": "npm run jest -- --coverage",
    "test:update": "npm run jest -- -u",
    "tsc": "tsc --noEmit"
  },
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js",
    "**/*.{js,jsx,tsx,ts,less,md,json}": ["prettier --write"]
  },
  "browserslist": ["> 1%", "last 2 versions", "not ie <= 10"],
  "dependencies": {
    "@ant-design/icons": "^4.7.0",
    "@ant-design/pro-components": "^2.3.37",
    "@ant-design/use-emotion-css": "1.0.4",
    "@umijs/route-utils": "^2.1.3",
    "antd": "^5.0.0",
    "classnames": "^2.3.2",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
    "omit.js": "^2.0.2",
    "rc-menu": "^9.6.4",
    "rc-util": "^5.24.4",
    "react": "^18.0.0",
    "react-dev-inspector": "^1.8.1",
    "react-dom": "^18.0.0",
    "react-helmet-async": "^1.3.0"
  },
  "devDependencies": {
    "@ant-design/pro-cli": "^2.1.0",
    "@testing-library/react": "^13.4.0",
    "@types/classnames": "^2.3.1",
    "@types/express": "^4.17.14",
    "@types/history": "^4.7.11",
    "@types/jest": "^29.2.1",
    "@types/lodash": "^4.14.186",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@types/react-helmet": "^6.1.5",
    "@umijs/lint": "^4.0.34",
    "@umijs/max": "^4.0.33",
    "cross-env": "^7.0.3",
    "eslint": "^8.0.0",
    "express": "^4.18.2",
    "gh-pages": "^3.2.0",
    "husky": "^7.0.4",
    "jest": "^29.2.2",
    "jest-environment-jsdom": "^29.2.2",
    "lint-staged": "^10.0.0",
    "mockjs": "^1.1.0",
    "prettier": "^2.7.1",
    "swagger-ui-dist": "^4.14.2",
    "ts-node": "^10.9.1",
    "typescript": "^4.8.4",
    "umi-presets-pro": "^2.0.0"
  },
  "engines": { "node": ">=12.0.0" }
}

麻烦试一下，谢谢！ @chenshuai2144

[Capricair]

facebook/create-react-app#11880
可能和这个有关系 @chenshuai2144

[chenshuai2144]

我感觉像是浏览器插件

react-error-overlay 只有报错才会出现吧，可以 x 掉的

[Capricair]

我感觉像是浏览器插件

react-error-overlay 只有报错才会出现吧，可以 x 掉的

这还能凭感觉的，你试了pro create没问题？

[enson0131]

@umijs/bundler-webpack 这个包依赖了这个react-error-overlay

[enson0131]

我觉得好像是 umi4.0.44以上有个包 react-error-overlay(6.0.11) 热更新有bug
降级到4.0.36就可以了，我是这么解决的