Hot reload module failed : Cannot apply update. Need to do a full reload!

[iroy2000]

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

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. #

[iroy2000]

Um, I setup another project and seems working fine.

The project that failed with "Cannot apply update. Need to do a full reload!" is using with vagrant. Wonder it could be related to the problem. Need to research more on that, but if you have any insight, please let us know too. Thanks.

[mummybot]

Are you proxying, using the iframe mode or referencing your scripts inline to the server run with Vagrant? It may be that the something in that server set up is conflicting with how the webpack-dev-server operates.

I had an issue when trying to use webpack alongside Apache and Wordpress where things in Wordpress were impacting the webpack-dev-server: Wordpress was rewriting URLs and stripping the port required for proxying, and was making all referenced assets absolute URLs rather than starting with a '/' which meant Webpack couldn't reference them.

[joual]

I have the exact same issue. I narrowed it down to the same line. It adds module ID 0 as a parent. I setup an example repo reproducing the issue both with the CLI and a separate server.

https://github.com/joual/hmrbreak

[mummybot]

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

[AriaFallah]

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.

[iroy2000]

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

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

Hope it helps :)

[hammeiam]

@iroy2000 Could you post some more details on step 2 of your resolution? Much appreciated!

[AriaFallah]

@hammeiam AriaFallah/WebpackTutorial#18 (comment)

[Magomogo]

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

[henrikra]

I installed this plugin https://github.com/gaearon/react-transform-hmr and now my webpack doesn't do full reload anymore! 👯

[mattisa]

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

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

[jcrben]

fyi, if you're using hotOnly it will use the only-dev-server.js and the error only gets logged out as of webpack 3.0 (see onErrored code).

[orpheus]

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.

[UtmostCreator]

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;

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

[jakeonfire]

Please, explain where should we put these 2 lines;

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

the new location for the relevant documentation is https://webpack.js.org/guides/hot-module-replacement. after reading it, however, i think my issue is that the module in question uses addEventListener, so hot-updating the code would be problematic.

[igorrfc]

For those wondering where to place the recommended snippet:

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

I tried the entry file configured in my webpack's config (src/index.js in my case) and it worked. Hope it helps anyone else having problems with this.