Hot reload not working, need to run npm run build

[coffeeneed]

Hot reload is occasionally not working (more often than not). When I do changes to my code, I need to npm run build it again to render the changes and then run node server.js or nodemon server.js again. This is, of course, really frustrating for a beginner trying to learn and debug.

However. Everything seems to work perfectly sometimes -- though I don't see any clear pattern on why or when.

An interesting thing is that when I hard reset the Chrome tab, my new changes flashes for 200 ms and then resets to the old version again, so it clearly has something to do with cache. I found some older threads regarding a cache problem in Chrome. So I've tried disabling cache when dev tools is open, reset settings, etc.

Here's an error from console which are there all the time (even when it's working): [HMR] Update check failed: SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttpRequest.request.onreadystatechange (http://localhost:3000/js/bundle.js:44:33)

Here's an error from console which are there when hot reloading is working (note: I need to manually press F5, no hard reset, to see correct changes)

[HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See http://webpack.github.io/docs/hot-module-replacement-with-webpack.html for more details.

• npm -v 5.6.0
• node -v 8.9.3
• Windows 10
• Occasionally running other servers on localhost:3000. Chrome getting nipple confused?

Anyone got a clue on what's going on? Hoping for some good ideas ;D

[sprzedwojski]

I've got the same issue. When hot reloaded, the new changes flash on the screen for a fraction of a second and then everything goes back to default. But sometimes, randomly, it works. I suppose it has something to do with differences between server-side and client-side rendering.

My observations are as follows:

• with nodemon server.js changes in backend code are hot reloaded correctly, but changes in frontend are not
• with node server.js changes in backend code are not hot reloaded, and changes in frontend are sometimes hot reloaded correctly