Basic hot reloading with webpack 5 not working properly

Question

Issues

• It is loading the entire page

---

• Operating System: macOS Big Sur 11.2

• Node Version: v14.15.4

• NPM Version: 6.14.10

• webpack Version: ^5.19.0

• webpack-dev-server Version: ^4.0.0-beta.0

• Browser: Google Chrome Version 88

• [x] This is a bug

Code

Repository link: https://github.com/Ridermansb/webpack5Hot

• master branch it's using only basic webpack-dev-server configuration without any plugins
• react-hot-loader branch it's using react-hot-loader plugin. Pull Request #1
• react-refresh-webpack-plugin branch it's using pmmmwh/react-refresh-webpack-plugin webpack plugin. Pull Request #2

Expected Behavior

In all case... should not reload the page and only reload the portion that's changed

Actual Behavior

It's Always reloading the entire page.

How can we reproduce the behavior?

Just clone the repository ridermansb/webpack5Hot

• npm install
• npm start

And try update Header component