webpack: Hot Module Replacement not working

I tried following this tutorial to get Hot Module Replacement working in my app. Everything appears to be working in the console, except the update never happens. For instance, if I change a file, I’ll see these logs:

    webpack-dev-server: Hot Module Replacement enabled. jsx.js:481
(2) webpack-dev-server: App updated. Recompiling... jsx.js:485
    webpack-dev-server: App hot update... jsx.js:515

But never anything like:

***** Updated Main.scss ***** jsx.js 
Updated modules: jsx.js

Here’s a repo demonstrating the issue. I’ve tried changing both script files and stylesheets; however, neither triggers a complete update.

How do I get HMR working?

About this issue

Original URL
State: closed
Created 10 years ago
Comments: 22 (8 by maintainers)

Commits related to this issue

Making Hot Module Replacement work: Fixes https://github.com/webpack/webpack/issues/406 — committed to appsforartists/ambidex-example--bike-index by appsforartists 10 years ago

Most upvoted comments

The problem is, there are many different ways to configure this all. So you end up reading tutorials and one tells you to add the HotModuleReplacementPlugin and the other tells you to add the --hot flag and somehow you end up having both.

I think it’s very unexpected behavior. Normally, command line flags override global settings i.s.o. appending to them… especially when doing so actually breaks the setup.

+33

Download on Jan 2, 2016

webpack-dev-server --hot --inline does not work. Just refreshes the page. I have spent almost 2 hours pulling my hair over this. Incredibly complex to get it right.

+16

nojvek on May 24, 2017

I’ve found the problem: The publicPath of the webpack config didn’t point to the webpack-dev-server.

Just add this line to your application/server.js before creating the WebpackDevServer:

webpackConfig.output.publicPath = "http://" + host + ":" + webpackPort +
    webpackConfig.output.publicPath;

I’ve also created pull-requests to improve error logging.

+12

jhnns on Aug 18, 2014

This problem is due to the lack of a local webpack-dev-server. Run this command:

npm install --save-dev webpack-dev-server

Try again, It’ll be work.

lzxgh on Jan 15, 2018

@skrat remove the HotModuleReplacementPlugin from the config (plugins). It’s added by the --hot flag.

sokra on Nov 13, 2014

@Download I can’t agree more with you. Just use webpack-dev-server --hot --inline and remove others, e.g new webpack.HotModuleReplacementPlugin() or devServer: { hotOnly: true, inline: true }, it is successful

sally2015 on Apr 6, 2017