10

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"
  ]
}
Starfleet Security
  • 1,813
  • 3
  • 25
  • 31
  • Maybe your home Visual Studio and your work one are different versions? – new Q Open Wid Aug 17 '19 at 14:20
  • No, they're both the latest versions. – Starfleet Security Aug 17 '19 at 14:28
  • hot reloading is done through websocket, check your console for errors – Lawrence Cherone Aug 17 '19 at 14:29
  • 1
    @LawrenceCherone Not sure why I didn't think of looking there, but your suggestion led to the following. It was too long to post all the details listed, but maybe this means something to you? websocket.js:80 WebSocket connection to 'wss://localhost:44363/sockjs-node/449/vc3j5upz/websocket' failed: WebSocket is closed before the connection is established. – Starfleet Security Aug 17 '19 at 14:42
  • So I discovered that if I use "npm start" from the package manager console, then hot reloading works as expected. However, this opens the website under port 3000, rather than port 44363 which is what VS does based on the properties page. So why are these different and why does it work from one and not the other? – Starfleet Security Aug 17 '19 at 20:36
  • what is your operation? Ubuntu or Mac or Window? – Vu Luu Aug 27 '19 at 02:55
  • This is on Windows 8.1 – Starfleet Security Aug 27 '19 at 14:34
  • You haven't got your dev environment set up through a proxy do you? I had a similar problem when I started channelling everything through nginx. Or a home VPN? Have you tried deleting your node modules and re-running npm/yarn install? Could be a dependency or build that got borked along the way. Could also try updating react-scripts – James Morrison Aug 27 '19 at 15:48
  • No VPN or anything like that. I did reinstall all the node modules, a few times. No luck. – Starfleet Security Aug 27 '19 at 17:25
  • I don't know your particular problem, but I think it is something related in your code, because before it was working. You may want to look into this question though, https://stackoverflow.com/questions/12487828/what-does-websocket-is-closed-before-the-connection-is-established-mean – HexaCrop Aug 28 '19 at 05:21
  • My code hasn't changed since it was working. Perhaps an NPM package has changed, but if it did, I'm not aware of it. Plus, I started a completely new solution and it still doesn't work. So it would seem to be something related to my machine setup, not the solution itself. – Starfleet Security Aug 28 '19 at 15:17
  • 3
    I'd say chances of you getting this solved without sharing your hot reloading code / config are very low. It's *odd* that using the same code & config should work on one machine and not another, so either there *is* actually a difference or it's set up such that it behaves differently depending on the machine it's running on, for whatever reason. Without sharing the code & config, and probably also the exact versions of everything including the browser you're using, I think any attempts at solving this are likely to just be guesses. – davnicwil Aug 30 '19 at 22:45
  • There is no code to share. This is the standard react template. – Starfleet Security Sep 01 '19 at 23:57
  • FWIW I have the same problem but using the Angular template in VS2019. Only difference is that I have 2 projects on the same laptop: one detects hot changes and the other does not. The one that does not detect hot changes is a project I upgraded from Angular 5 to Angular 8, and .Net Core 2.2 to 3. So obviously something I missed during those upgrades. Building a new project using the latest template in VS2019 works 100% though. So frustrating. – Neville Nov 08 '19 at 14:54

4 Answers4

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.

Andy Braham
  • 9,594
  • 4
  • 48
  • 56
0

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

kishore kingmaker
  • 476
  • 3
  • 15
  • There is no "webpack.config.js" file in this template. Nor is there one in the project at the office (which is working). I also get the same console error mentioned in my comments above at the office, so apparently that has nothing to do with why it doesn't work at home. I updated every single NPM package to the latest and it still doesn't work at home. So my next step is to compare the package.json files and see if something is different between office and home (which would be strange since to my knowledge they used the same template). – Starfleet Security Sep 03 '19 at 15:50
  • all the symptoms you mentioned points to file watcher issue(worked fine for the first time). maybe i'm wrong. but try this as to conform that's not the case, go to vs-code settings(a gear wheel icon on the bottom left corner). search for 'watcher exclude'. add **/node_modules/** to the exclude list if it's not added yet. – pope_maverick Sep 09 '19 at 11:47
  • I'm not using VS Code, I'm using Visual Studio 2019. – Starfleet Security Sep 09 '19 at 22:09
0

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

  • This doesn't work. I get no error (in VS or Chrome), but it just hangs in the browser and never actually starts the app. – Starfleet Security Sep 05 '19 at 22:46
  • can you share the package.json file ? –  Sep 06 '19 at 13:52
  • Added package.json to original post, too long to add to comment. – Starfleet Security Sep 06 '19 at 22:19
  • 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/ –  Sep 09 '19 at 10:20
  • 1
    How can it be a template problem if it worked originally? – Starfleet Security Sep 09 '19 at 22:10
  • Because I dont know how rimraf ./build in package.json works, have you ever delete rimraf ./build and run npm start ? And maybe node_modules failed download all package –  Sep 11 '19 at 00:03
  • Honestly, I'm not sure how rimraf works either, but I do know that the "start" in package.json is the same at home as it is in the office, so that shouldn't be a factor. – Starfleet Security Sep 12 '19 at 19:08
0

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.

Øyvind
  • 433
  • 4
  • 7