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

[pmmmwh]

Hi, if you add your entry to your webpack.config.js it will work.

[pmmmwh]

Error will now be thrown in 0.5.0-beta.1.

[FlavioMH]

@pmmmwh Sorry to write here on a closed issue, but I get a behaviour that is exactly the same @Ridermansb described on his demo.gif
Different from his sample, I have an entry in my webpack.common.js config file (no errors shown on 0.5.0-beta.8).

I put a sample on this repo 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 (bigger project works with React, Redux, Typescript).

---

• 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

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

Is this an issue with another package? Maybe webpack-dev-server one?

[pmmmwh]

I'll take a look tomorrow.

[FlavioMH]

@pmmmwh Sorry to bore you...any news on this?

[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: