webpackDevServer4HMR

Problem with webpack 5 and webpack-dev-server 4 basic hot reloading: the entire page is refreshed!

Issues

• When I try to change a thing (also a simple word), then the entire page refresh, even if on startup developer tools console shows:

---

• Operating System: Windows 10 Pro 20H2 - x64

• Node Version: v14.17.0

• NPM Version: 6.14.13

• webpack Version: 5.37.1

• webpack-dev-server Version: 4.0.0-beta.3

• webpack-cli 4.7.0

• @pmmmwh/react-refresh-webpack-plugin 0.5.0-beta.8

• Browser: Google Chrome Version 90

• This is a bug

Code

Repository link: https://github.com/FlavioMH/webpackDevServer4HMR

Repository has been created starting from a bigger project, so you can find out some webpack settings or package.json entries not used in this sample. What it is important to know is that the project actually (tries to) work on:

• react
• redux
• typescript

Expected Behavior

Before to update to webpack v5, I was using webpack v4 with webpack-dev-server v3.11.2. I was also using react-hot-loader and expected behavior was:

• listing on Visual Studio Code console files affected by reload
• listing on developer tools console files affected by reload
• browser not to refresh whole page, but only changed label

Actual Behavior

Once I save the file, never mind about what change I am doing, browser immediately shows tabl loading spinner and the enite page is refreshed. This happens even if HMR seems to be activated.

How can we reproduce the behavior?

1. Clone the repository FlavioMH/webpackDevServer4HMR
2. npm install
3. npm run app
4. Try to change "Try to change this label and everything will refresh..." sentence into testApplication.tsx file