In Reactjs on Windows suddenly the Mouse stopped working

Viewed 78

When I start the run debug of my app in Visual Studio Code(F5) then the mouse is not working. I can not anymore left click with the mouse but I can move the mouse pointer but no click is registered. I can press the keyboard "tab" and press ENTER but that's it. I can't see where to start debug this problem so I add my package.json maybe it can give some clue

In Windows I use the Chrome Browser and other apps and the mouse is behaving normally there.

What I did prior to this strange happening was that I tried the "react-scripts": "5xx". And then I Went back to "react-scripts": "4.0.3"

Here's my 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"
  }
}
1 Answers

I've had this issue with react-script myself, and it seems to be a well-known issue.

As suggested in this github issue, you can do the following:

  • Change the react-script version to 4.0.3 in package.json
  • Add "resolutions": { "react-error-overlay": "6.0.11" } (latest version of react-error-overlay) to your package.json
  • npm install react-error-overlay
  • Delete your node_modules and package-lock.json
  • Run npm i

Hope that fixes it.

Related