Hot reloading tested in different ways and is not working properly

[Ridermansb]

• 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

• This is a bug

• This is a modification request

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.

For Bugs; How can we reproduce the behavior?

Just clone the repository ridermansb/webpack5Hot

• npm install
• npm start

And try update Header component

[alexander-akait]

react-hot-loader is not compatibility with webpack@5 gaearon/react-hot-loader#1449

[alexander-akait]

You don't have entry, so webpack-dev-server doesn't know how to attach hot reloading my mistake

[Ridermansb]

react-hot-loader is not compatibility with webpack@5 gaearon/react-hot-loader#1449

And about react-refresh ?
Same happening with react-refresh plugin

[alexander-akait]

Something wrong in configuration...

[alexander-akait]

Change:

"start": "webpack serve --mode development --hot --host localhost --static public"

static bug was fixed, host problem will fixed too in near future, --hot only is no need for you, now hot is working, but still not reload modules (you can see it in console)

Why it is still not work? I don't know, also I found your duplicate the issue pmmmwh/react-refresh-webpack-plugin#303, don't do it in future, be patient

[Ridermansb]

@alexander-akait the problem is that I don't know if this issue is on webpack-dev-server, react-hot-loader or on react-refresh
That's the reason I duplicated the issue.

---

About your recommendation, after I made this change... the UI is not updating

[alexander-akait]

Problem from react-refresh-webpack-plugin

[Edge00]

webpack-dev-server Version: ^4.0.0-beta.0
whole page refreshed on vue project

[ankurk91]

webpack-dev-server Version: ^4.0.0-beta.1
still a full page reaload on a vue v2 project.

[alexander-akait]

@ankurk91 Please provide reproducible test repo, your information is not help to help you

[ankurk91]

HMR is working fine for me now, with webpack-dev-server beta 2, and vue v2

[alexander-akait]

Fixed in beta, stable release will be soon