HMR/Live Reloading broken after Webpack 5 rc.0 -> rc.1 update

[wojtekmaj]

• Operating System: macOS Big Sur
• Node Version: 14.5.0
• NPM Version: 6.14.5
• webpack Version: 5.0.0-rc.3
• webpack-dev-server Version: ^3.10.3
• Browser: Chrome

• This is a bug
• This is a modification request

After upgrading from Webpack 5.0.0-beta.29 to 5.0.0-rc.3, I've noticed that HMR/Live Reloading stopped working, even though no other changes to the code were made.

I investigated by updating it step by step and here's my outcome:

Version	Works?
5.0.0-beta.29	Yes ✅
5.0.0-beta.30	Yes ✅
5.0.0-beta.31	Yes ✅
5.0.0-beta.32	Yes ✅
5.0.0-beta.33	Yes ✅
5.0.0-rc.0	Yes ✅
5.0.0-rc.1	No ❌
5.0.0-rc.2	No ❌
5.0.0-rc.3	No ❌

Code

// webpack.config.js
const webpack = require('webpack');
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const isProduction = process.env.NODE_ENV === 'production';
const isDevelopment = !isProduction;

const publicPath = process.env.PUBLIC_URL || '/';

module.exports = {
  mode: isProduction ? 'production' : 'development',
  bail: isProduction,
  entry: {
    src: [
      './src/index.jsx',
    ],
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath,
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: path.resolve(__dirname, 'src'),
        use: 'babel-loader',
      },
    ].filter(Boolean),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
  ].filter(Boolean),
  devServer: {
    historyApiFallback: true,
    hot: true,
    port: 3000,
  },
};

Expected Behavior

HMR to work on Webpack version 5.0.0-rc.1 to 5.0.0-rc.3.

Console output in 5.0.0-beta.29 to 5.0.0-rc.0:

[HMR] Waiting for update signal from WDS...
[WDS] Hot Module Replacement enabled.
[WDS] Live Reloading enabled.

...and of course, on change...

[WDS] App updated. Recompiling...
[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
[HMR] Updated modules:
[HMR]  - ./components/pages/index.jsx
[HMR] App is up to date.

Actual Behavior

HMR doesn't on Webpack version 5.0.0-rc.1 to 5.0.0-rc.3.

Console output in 5.0.0-rc.3:

[HMR] Waiting for update signal from WDS...

...and silence after that.

I can see that Webpack is rebuilding, so I think Webpack part works fine. Refreshing the page manually also gets me the updated page. So only HMR/Live Reloading part must be broken.

[alexander-akait]

Please create reproducible test repo, I think bug in webpack-dev-server

[wojtekmaj]

Managed to narrow it down quite a lot.

Webpack HMR bug repro.zip

[wojtekmaj]

Interestingly, removing .browserlistrc seems to fix the issue.

So I compared src.js in both cases looking for answer and found that:

With .browserlistrc (no: when HMR not working) src.js ends with:

/******/ 	
/************************************************************************/
/******/ 	// module cache are used so entry inlining is disabled
/******/ 	// startup
/******/ 	// Load entry module
/******/ 	__webpack_require__("./src/index.jsx");
/******/ 	__webpack_require__("./node_modules/webpack/hot/dev-server.js");
/******/ })()
;

and without .browserlistrc (no: when HMR is working), src.js ends with:

/************************************************************************/
/******/ 	// module cache are used so entry inlining is disabled
/******/ 	// startup
/******/ 	// Load entry module
/******/ 	__webpack_require__("./src/index.jsx");
/******/ 	__webpack_require__("./node_modules/webpack-dev-server/client/index.js?http://localhost:3000");
/******/ 	__webpack_require__("./node_modules/webpack/hot/dev-server.js");
/******/ })()
;

[alexander-akait]

@wojtekmaj Can you provide .browserlistrc?

[alexander-akait]

Looks webpack-dev-server thinks it is not browser

[wojtekmaj]

An example is in the repro repo linked above, but I tested these and all of them broke the build for me:

Original:

Chrome >=72
Firefox >=66
IE >=11

Original but lowercase:

chrome >=72
firefox >=66
ie >=11

Thought it's maybe IE so removed and left just Chrome:

Chrome >=72

[wojtekmaj]

@evilebottnawi looks like your diagnosis is correct, because adding target: 'web' (which overwrites the default being 'browserlist' since 5.0.0-rc.1) to Webpack config resolves the issue.

[alexander-akait]

Yes, we need to fix it in webpack-dev-server, hope I will find time on it, anyway you can send a PR

[khalwat]

I too am experiencing this issue, which renders HMR inoperative with webpack 5, though I'm using @babel/preset-env rather than .browserlistrc.

But the symptoms are the same, everything builds, but this is all that is output in the console:

[HMR] Waiting for update signal from WDS...

I did confirm, however, that rolling back to:

        "webpack": "5.0.0-beta.29",

causes it to work again as expected:

[HMR] Waiting for update signal from WDS...
index.js:48 [WDS] Hot Module Replacement enabled.
index.js:52 [WDS] Live Reloading enabled.

[khalwat]

I can confirm that it works as expected with webpack 5.0.0-rc.0 but breaks with 5.0.0-rc.1 so the error is here somewhere:

https://github.com/webpack/webpack/compare/v5.0.0-rc.0..v5.0.0-rc.1

https://github.com/webpack/webpack/releases/tag/v5.0.0-rc.1

I can also confirm that if I add:

        target: 'web',

…to the base webpack config, that the latest release does indeed work.

[chenxsan]

I've pushed a pull request to fix it, can anyone with the problem try the branch with yarn's resolution? Just adding the below code to package.json and run yarn install --force

  "resolutions": {
    "webpack-dev-server": "git://github.com/chenxsan/webpack-dev-server#bugfix/fix-hmr-browserslist"
  }

[khalwat]

Using that @chenxsan I get:

webpack_1  | > webpack-dev-server --config webpack.dev.js --trace-deprecation
webpack_1  |
webpack_1  | Error: Cannot find module '../../client/'
webpack_1  |     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:668:15)
webpack_1  |     at Function.resolve (internal/modules/cjs/helpers.js:19:19)
webpack_1  |     at addEntries (/var/www/project/buildchain/node_modules/webpack-dev-server/lib/utils/addEntries.js:39:36)
webpack_1  |     at updateCompiler (/var/www/project/buildchain/node_modules/webpack-dev-server/lib/utils/updateCompiler.js:48:5)
webpack_1  |     at new Server (/var/www/project/buildchain/node_modules/webpack-dev-server/lib/Server.js:72:5)
webpack_1  |     at startDevServer (/var/www/project/buildchain/node_modules/webpack-dev-server/bin/webpack-dev-server.js:106:14)
webpack_1  |     at processOptions (/var/www/project/buildchain/node_modules/webpack-dev-server/bin/webpack-dev-server.js:166:3)
webpack_1  |     at findPort.then (/var/www/project/buildchain/node_modules/webpack-dev-server/lib/utils/processOptions.js:33:9)
webpack_1  |     at process.runNextTicks [as _tickCallback] (internal/process/task_queues.js:52:5)
webpack_1  |     at Function.Module.runMain (internal/modules/cjs/loader.js:880:11)
webpack_1  |     at internal/main/run_main_module.js:21:11
webpack_1  | npm ERR! code ELIFECYCLE
webpack_1  | npm ERR! errno 1
webpack_1  | npm ERR! example-project@1.1.3 debug: `webpack-dev-server --config webpack.dev.js --trace-deprecation`
webpack_1  | npm ERR! Exit status 1
webpack_1  | npm ERR!
webpack_1  | npm ERR! Failed at the example-project@1.1.3 debug script.
webpack_1  | npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
webpack_1  |
webpack_1  | npm ERR! A complete log of this run can be found in:
webpack_1  | npm ERR!     /root/.npm/_logs/2020-10-12T05_14_22_391Z-debug.log
fwt_webpack_1 exited with code 1

[chenxsan]

Using that @chenxsan I get:

webpack_1  | > webpack-dev-server --config webpack.dev.js --trace-deprecation
webpack_1  |
webpack_1  | Error: Cannot find module '../../client/'
webpack_1  |     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:668:15)
webpack_1  |     at Function.resolve (internal/modules/cjs/helpers.js:19:19)
webpack_1  |     at addEntries (/var/www/project/buildchain/node_modules/webpack-dev-server/lib/utils/addEntries.js:39:36)
webpack_1  |     at updateCompiler (/var/www/project/buildchain/node_modules/webpack-dev-server/lib/utils/updateCompiler.js:48:5)
webpack_1  |     at new Server (/var/www/project/buildchain/node_modules/webpack-dev-server/lib/Server.js:72:5)
webpack_1  |     at startDevServer (/var/www/project/buildchain/node_modules/webpack-dev-server/bin/webpack-dev-server.js:106:14)
webpack_1  |     at processOptions (/var/www/project/buildchain/node_modules/webpack-dev-server/bin/webpack-dev-server.js:166:3)
webpack_1  |     at findPort.then (/var/www/project/buildchain/node_modules/webpack-dev-server/lib/utils/processOptions.js:33:9)
webpack_1  |     at process.runNextTicks [as _tickCallback] (internal/process/task_queues.js:52:5)
webpack_1  |     at Function.Module.runMain (internal/modules/cjs/loader.js:880:11)
webpack_1  |     at internal/main/run_main_module.js:21:11
webpack_1  | npm ERR! code ELIFECYCLE
webpack_1  | npm ERR! errno 1
webpack_1  | npm ERR! example-project@1.1.3 debug: `webpack-dev-server --config webpack.dev.js --trace-deprecation`
webpack_1  | npm ERR! Exit status 1
webpack_1  | npm ERR!
webpack_1  | npm ERR! Failed at the example-project@1.1.3 debug script.
webpack_1  | npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
webpack_1  |
webpack_1  | npm ERR! A complete log of this run can be found in:
webpack_1  | npm ERR!     /root/.npm/_logs/2020-10-12T05_14_22_391Z-debug.log
fwt_webpack_1 exited with code 1

Sorry, have no idea what's going on here. Maybe you can remove the resolution and try to edit node_modules/webpack-dev-server/lib/utils/addEntries directly? Just add a browserslist in the webTarget array. I've tested on my computer with the example code @wojtekmaj provides, it seems to be working fine with both webpack 5.0.0-rc.3 and webpack 5.