Hot reloading tested in different ways and is not working properly

• 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

[pmmmwh]

I’ll take a look tomorrow.

[pmmmwh]

@FlavioMH This has nothing to do with the plugin. It is probably either something wrong in your Webpack setup, or a bug from WDS.

If you just persist the logs from hot reloading (simply by running hot=only or just use dev tools persist logs) you can see that WDS is complaining that the content base was not properly set and is lost on every update:

Which, when I do devServer.devMiddleware.writeToDisk to print out files, there seem to be a directory problem where some names are undefined and thus not recognized properly: