CODEWITHSUNDEEP
node.jsreactjsnpmwebpackvisual-studio-2019
Starfleet Security
Starfleet Security

Reputation: 1843

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

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"
  ]
}

Upvotes: 10

Views: 7256

Answers (4)

&#216;yvind
&#216;yvind

Reputation: 433

If you are running the application with visual studio and for some reason ran `npm run build, you'we got a /build folder aligned with your /public folder. Visual Studio will then prefer the /build folder thus your hot reload will not work. Delete the /build folder, rebuild the Visual Studio application and don't use 'npm run build' while developing.

Upvotes: 0

Andy Braham
Andy Braham

Reputation: 10161

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.

Upvotes: 1

user7923745
user7923745

Reputation:

I think it's template problem. I suggest you to uninstall reactjs template and adding your own configurations using webpack. follow this manual https://webpack.js.org/guides/getting-started/

and you can manually load Bundle file from your project

Upvotes: 0

kishore kingmaker
kishore kingmaker

Reputation: 476

set cache: false in webpack config. which will solve the HMR problem

https://webpack.js.org/configuration/other-options/#cache

for reference you can refer the given link

Upvotes: 0

Related Questions