当我在Visual Studio代码(F5)中启动应用程序的运行调试时,鼠标不工作.我不能再用鼠标左键点击,但我可以移动鼠标指针,但没有点击注册.我可以按键盘"tab"并按ENTER键,但仅此而已.我不知道从哪里开始调试这个问题,所以我添加了我的包.也许它能提供一些线索

在Windows中,我使用Chrome浏览器和其他应用程序,那里的鼠标运行正常.

在这件奇怪的事情发生之前,我做的是try "react-scripts": "5xx".然后我回到"react-scripts": "4.0.3"

这是我的Package.json

{
  "name": "greta-thunberg-fff",
  "version": "1.2.9",
  "private": true,
  "homepage": "https://greta.portplays.com",
  "main": "index.js",
  "module": "dist/index.js",
  "files": [
    "dist",
    "README.md"
  ],
  "dependencies": {
    "@material-ui/core": "^4.11.2",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "@material-ui/styles": "^4.11.2",
    "@types/recompose": "^0.30.9",
    "axios": "^0.19.2",
    "bootstrap": "^4.5.2",
    "change-case": "^4.1.2",
    "classnames": "^2.3.1",
    "clean-tag": "^3.1.1",
    "clsx": "^1.1.1",
    "comma-separated-values": "^3.6.4",
    "crypto-js": "^4.0.0",
    "date-fns": "^2.23.0",
    "faker": "^5.5.3",
    "firebase": "^7.23.0",
    "formik": "^2.2.5",
    "framer-motion": "^2.9.5",
    "gsap": "^3.5.1",
    "history": "^5.0.0",
    "i": "^0.3.6",
    "lodash": "^4.17.19",
    "lodash.debounce": "^4.0.8",
    "mammoth": "^1.4.11",
    "material-table": "^1.69.2",
    "moment": "^2.27.0",
    "normalize-wheel": "^1.0.1",
    "notistack": "^3.0.0-alpha.1",
    "npm": "^7.11.2",
    "pdfjs-dist": "^1.8.357",
    "preval.macro": "^5.0.0",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-activity": "^1.2.2",
    "react-bootstrap": "^1.3.0",
    "react-chartjs-2": "^2.11.1",
    "react-data-grid": "^6.1.0",
    "react-detect-offline": "^2.4.0",
    "react-dom": "^17.0.2",
    "react-dropzone": "^11.3.4",
    "react-helmet": "^6.1.0",
    "react-motion": "^0.5.2",
    "react-perfect-scrollbar": "^1.5.8",
    "react-redux": "^7.2.5",
    "react-resize-detector": "^5.0.7",
    "react-router": "^6.0.0-beta.4",
    "react-router-dom": "^6.0.0-beta.4",
    "react-slick": "^0.27.3",
    "react-spring": "^8.0.27",
    "react-transition-group": "^4.4.1",
    "react-virtualized": "^9.22.3",
    "react-virtualized-auto-sizer": "^1.0.6",
    "react-visibility-sensor": "^5.1.1",
    "react-window": "^1.8.6",
    "rebass": "^4.0.7",
    "recompose": "^0.30.0",
    "redux": "^4.1.1",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.1.3",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0",
    "sass": "^1.41.1",
    "simplebar-react": "^2.3.5",
    "slick-carousel": "^1.8.1",
    "styled-components": "^5.1.1",
    "styled-system": "^5.1.5",
    "three": "^0.85.2",
    "typescript": "^4.6.2",
    "uuid": "^8.3.1",
    "xlsx": "^0.10.1",
    "yup": "^0.32.1"
  },
  "scripts": {
    "start": "set PORT=6545&& react-scripts start",
    "build": "§",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -b master -d build"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.1.1",
    "@typescript-eslint/parser": "^4.1.1",
    "axios": "^0.19.2",
    "babel-eslint": "^10.1.0",
    "clean-tag": "^3.1.1",
    "eslint": "^6.6.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.6",
    "eslint-plugin-react-hooks": "^4.1.2",
    "gh-pages": "^2.0.1",
    "prettier": "^2.1.1",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-scripts": "4.0.3",
    "rebass": "^4.0.7",
    "styled-system": "^5.1.5"
  }
}

推荐答案

我自己也有过这个问题,这似乎是一个众所周知的问题.

如本github issue中所述,您可以执行以下操作:

  • 将react脚本版本在package.json中更改为4.0.3
  • "resolutions": { "react-error-overlay": "6.0.11" }(react-error-overlay的最新版本)添加到package.json
  • npm安装react 错误覆盖
  • 删除你的node_modulespackage-lock.json
  • npm i

希望能解决这个问题.

Reactjs相关问答推荐

NextJs Form不允许我输入任何输入,

迁移到React Router Dom v6后,我是否错误地使用了Link组件?

如何使用Reducer更新全局变量

如何避免react 使用ESLINTreact 挂钩/穷举-deps进行第一次呈现

REACT路由DOM根据参数呈现不同的路由

REACTJS:在Reaction中根据路由路径更改加载器API URL

App.js中的H2组件不会动态呈现.这可能是什么问题?

react 挂钩-使用有效澄清

Javascript - 正则表达式不适用于 MAC OS - 编码?

PWA:注册事件侦听器不会被触发

React 无效的钩子调用:如何避免嵌套钩子?

是否可以直接在 jsx 标签上使用 CSS 定义的 colored颜色 ?

React中的功能性组件克隆优化

React 测试库 - 如何断言异步函数之间的中间状态?

MUI - ButtonGroup fullWidth 条件屏幕大小不起作用?

如何通过 React JS 中的映射将新元素添加到对象数据数组中

react 测试显示错误的结果

未捕获的错误:操作必须是使用 redux/toolkit 的普通对象

react / firebase 基地.如何在我的项目中保存更新的数据?

如何判断对话框组件是否位于对话框之上?