保存代码更改后，React App 不会重新加载

Question

When i do some updates on the code and save them the react app seems not to be functional, it stops and the mouse clicks seems not to be working. I'm obliged to manually refresh the page. This is my package.json:

  "dependencies": {
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.5",
"@testing-library/user-event": "^12.8.3",
"@webiny/ui": "^5.22.1",
"axios": "^0.21.1",
"firebase": "^9.6.10",
"material-ui": "^0.20.2",
"moment": "^2.29.3",
"npm": "^7.7.6",
"react": "^16.14.0",
"react-accessible-accordion": "^4.0.0",
"react-bootstrap": "^1.6.4",
"react-chartjs-2": "^4.1.0",
"react-dom": "^17.0.1",
"react-firebaseui": "^4.1.0",
"react-fontawesome": "^1.7.1",
"react-giphy-picker": "^1.1.1",
"react-icons": "^4.3.1",
"react-modal": "^3.14.3",
"react-paginate": "^7.1.3",
"react-redux": "^8.0.0",
"react-router-dom": "^5.3.1",
"redux": "^4.2.0",
    "web-vitals": "^1.1.1"
  },

  "scripts": {
    "start": "PORT=5000 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

I'm using VS code on linux Ubuntu 20

Answer 1

Try doing the the following changes.

If you're using npm

  "overrides" : {
   "react-error-overlay": "6.0.9"
   }

If you are using yarn

   "resolutions" : {
     "react-error-overlay": "6.0.9"
   }

After doing this, do install the packages once again and re-start the app. This should help

Answer 2

Tips on VS Code: You can enable autosave, so when any change code in your codebase, VS Code will automatically do it for you and you don't need to do it manually every time.