webpack-dev-server: Hot reload module failed : Cannot apply update. Need to do a full reload!

I was trying to debug why the HMR do full page reload everytime …

[HMR] Cannot apply update. Need to do a full reload!

And I tried to look into the module 286 and I don’t know why it is not accepted …

... And I start doing some tracing ... ( Not sure if the following is useful information or not )

I found parent.hot._acceptedDependencies has nothing in it

screen shot 2016-02-01 at 12 31 34 pm

screen shot 2016-02-01 at 2 38 10 pm

And my webpack config is very common, and I used the CLI

CLI: webpack-dev-server --hot --progress --colors --inline --content-base ./docroot

webpack config:

output: {
        path: path.join(__dirname, "docroot"),
        filename: (IS_PRODUCTION ? "assets/[hash].js" : "assets/bundle.js"),
        publicPath: "/"
    },

. . .

entry = [
        "webpack-dev-server/client?http://localhost:8080",
        './'+APP_ENTRY_POINT
    ];

Any help will be appreciated, thanks.

According to the documentation – Hot Module Replacement with Inline mode on CLI

Nothing more is needed. --inline --hot does all the relevant work automatically. The CLI of the webpack-dev-server automatically adds the special webpack/hot/dev-server entry point to your configuration. #

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 16

Most upvoted comments

Have you tried

if (module.hot)
  module.hot.accept()

https://webpack.github.io/docs/hot-module-replacement-with-webpack.html#what-is-needed-to-use-it

I know more than a few people who have forgotten this, and didn’t know why HMR was not working.

+105

AriaFallah on Mar 18, 2016

Spent hours to this issue before found that stateless functional components of React 0.14 are not supported.

+22

Magomogo on Apr 10, 2016

Have you tried
if (module.hot)
  module.hot.accept()
https://webpack.github.io/docs/hot-module-replacement-with-webpack.html#what-is-needed-to-use-it

I know more than a few people who have forgotten this, and didn’t know why HMR was not working.

Please, explain where should we put these 2 lines;

filename;
after which line of code it should go;
some other details (example).

+11

UtmostCreator on Mar 18, 2021

@AriaFallah: if (module.hot) module.hot.accept()

Works for me. Did not notice that on documentation at first.

mattisa on Sep 12, 2016

Have you tried
if (module.hot)
  module.hot.accept()
https://webpack.github.io/docs/hot-module-replacement-with-webpack.html#what-is-needed-to-use-it

I know more than a few people who have forgotten this, and didn’t know why HMR was not working.

I’m not immediately certain from the documentation on where exactly to put this code.

orpheus on Oct 3, 2019

@hammeiam https://github.com/AriaFallah/WebpackTutorial/issues/18#issuecomment-187722775

AriaFallah on Mar 22, 2016

I’m managed to fix the issues I have. Please note that I’m using vagrant, so it might be different for your case.

The following steps are what I changed

I replace my publicPath to be (IS_PRODUCTION ? "/" : "http://localhost:8080/")
I replace the react-hot-loader with react-transform-hmr

Hope it helps 😃

iroy2000 on Mar 18, 2016

Webpack has many different ways to set up a project, and some of them conflict. The docs aren’t too clear on exactly what combination of which you should be using when, and using virtual machines or over networks also complicates issues. I have a working simple repo here with hot module reloading:

https://github.com/mummybot/webpack-hmr-network-multiple-entry-points-issue

mummybot on Mar 7, 2016