Why does hot reloading not work for reactjs visual studio 2019 template

Question

I've been fooling around with ReactJS on my computer at home and at work. At home, I'm using Visual Studio 2019, NodeJS 10.16.2, NPM 6.9.0, and webpack 3.11.0.

Hot reloading DID work when I first started my project. At some point, it stopped working. I thought perhaps I had inadvertently made some change to a package or setting, so I created a completely new solution from scratch, but it still doesn't work. So apparently I've done something to my machine, but I can't imagine what.

At work, also using Visual Studio 2019 (I have to check the versions of the other stuff), hot reloading DOES work.

Can anyone think of something I might have done by accident that caused it to stop working? Or a way to try to make it work again? I've tried just about everything I found online, but much of it isn't recent, and none of it helped.

package.json file as requested:

{
  "name": "jobs",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.19.0",
    "bootstrap": "^4.1.3",
    "faye-websocket": "^0.11.3",
    "jquery": "3.4.1",
    "lodash": "^4.17.15",
    "merge": "^1.2.1",
    "oidc-client": "^1.9.1",
    "react": "16.9.0",
    "react-dev-utils": "^9.0.3",
    "react-dom": "^16.0.0",
    "react-loading-overlay": "^1.0.1",
    "react-router-bootstrap": "0.25.0",
    "react-router-dom": "5.0.1",
    "react-scripts": "3.1.1",
    "react-spinners": "0.6.1",
    "react-transition-group": "^4.2.2",
    "reactstrap": "8.0.1",
    "rimraf": "3.0.0",
    "toastr": "^2.1.4"
  },
  "devDependencies": {
    "ajv": "^6.9.1",
    "cross-env": "^5.2.1",
    "eslint": "6.3.0",
    "eslint-config-react-app": "5.0.1",
    "eslint-plugin-flowtype": "4.2.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-react": "^7.14.3"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "scripts": {
    "start": "rimraf ./build && react-scripts start",
    "build": "react-scripts build",
    "test": "cross-env CI=true react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "eslint ./src/"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Answer 1

I had the same problem with a fresh install of Visual Studio 2019 and had to install the Web Essentials extension that contains the Browser Reload on Save extension.