Webpack/react hot reload reloading whole page?

Question

This is probably asked all the time, but I've tried every approach under the sun and can't find a solution.

I've created a repo to make it easier to get help. You can clone it, run npm install and then npm start:dev to see a quick local server on http://localhost:8080.

It works, and when I change a file (say, src/components/Note/Note.css) the app does reload. However, I want to only reload the component, not the whole page. I'm not sure what I'm doing wrong. Any help will be appreciated!

Answer 1

To debug issues like this, enable "Preserve log" in Chrome DevTools console settings to preserve console log across page refresh.

The error was:

Uncaught RangeError: Maximum call stack size exceeded

This was fixed once the following changes were made:

1. Remove new webpack.HotModuleReplacementPlugin() from plugins (as webpack-dev-server is started with --hot)

2. Also opt-out of babel transpiling ES6 modules by updating presets in .babelrc to ["react", ["env", { "modules": false }]].

"modules": false is to tell babel to not compile import/exports and let webpack handle it as described here and here (Check step 3.3.c).