webpack-dev-server: Hmr don't work in webpack 4

Operating System: macos 10.13.3 (17D47)
Node Version: 8.9.3
NPM Version:5.5.1
webpack Version:4.5.0 && 4.0.0 beta1
webpack-dev-server Version:3.1.3

This is a bug

Code

i’d like to provide the resposity: https://github.com/webpack/webpack-dev-server/tree/master/examples/api/middleware

// change config in server.js
// set hot to true
  const devServerOptions = Object.assign({}, webpackConfig.devServer, {
+  hot: true,
    stats: {
      colors: true
    },
    before(app) {
      app.use((req, res, next) => {
        console.log(`Using middleware for ${req.url}`);
        next();
      });
    }
  });

Expected Behavior

change code in app.js, the hmr will work. changes below:

-   target.innerHTML = 'Scuccess!';
+  target.innerHTML = 'webpack!';

hmr is expected to run and the html will rerender

Actual Behavior

hmr not run

For Bugs; How can we reproduce the behavior?

see above

For Features; What is the motivation and/or use-case for the feature?

enable hmr with api usage in webpack 4

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 6
Comments: 30 (2 by maintainers)

Most upvoted comments

This is pretty frustrating.

+43

indefinitelee on Jul 23, 2018

I got

Ignored an update to unaccepted module...[HMR] The following modules couldn't be hot updated: (They would need a full reload!)

warning too, I fixed this issue by replacing webpack config devServer.hotOnly: true to devServer.hot: true.

+25

devrsi0n on Mar 5, 2019

if you use React, you can see react-hot-loader doc

+19

BeliefRC on Jul 25, 2018

i’m going to close issues as it seems folks mainly have issue with configurating HMR ‘correctly’ for there setup(s), please go to https://webpack.js.org/ for more information on how to do so

Anyone with a concrete issue and a repo, feel free to open a new issue instead 😃

michael-ciniawsky on Aug 25, 2018

Any solution here Please !??

BeSaRa on Feb 28, 2019

@hopperhuang @bastienrobert are you fix it? how do…sos

wuliqiangqiang on Dec 25, 2018

@BeSaRa Several solutions have already been explained above. Please add more details if these solutions are not adequate.

bastienrobert on Feb 28, 2019

Ok, it seems you’re not using the API so it should look like that:

config.entry = [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/dev-server',
'src/index.js'
]

If you’re curious, there’s some references about the API in the doc.

bastienrobert on Jul 29, 2018

By adding two entrypoints (like @indefinitelee comment), it works pretty well. The entrypoints are:

'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/dev-server'

Because I’m using the API, I think this is a pretty good solution in my start.js script used to start my dev env:

config.entry = [
  'webpack-dev-server/client?http://localhost:8080',
  'webpack/hot/dev-server',
  ...config.entry
]

just after the config import.

Edit (04/2019): I just read back this comment, it may not be clear. Here is how I did it : https://github.com/bastienrobert/halo/blob/master/scripts/start.js (I’m editing my Webpack config from an external script, it’s maybe why I look like a circular reference)

bastienrobert on Mar 4, 2019

@bastienrobert I have those two in my entry array as well as the root of my project as seen in my earlier post

I’m confused how you can use the spread on config.entry inside of itself. It looks like a circular reference.

config.entry = [ ‘webpack-dev-server/client?http://localhost:8080’, ‘webpack/hot/dev-server’, …config.entry ]

indefinitelee on Jul 26, 2018

It didn’t work for me as well… Check out those steps and it will work: https://webpack.js.org/guides/hot-module-replacement/

llioor on Apr 27, 2018

Could not get HRM working with v3.1.3. After enabling hot - everything stops updating. Also could not saw any “[HRM enabled]” string in console. https://github.com/gaearon/react-hot-loader/issues/934

theKashey on Apr 17, 2018