The resource http://localhost:8080/hot-update.js was preloaded using link preload but not used - warning

[dortamiguel]

trafficstars

I'm getting the following warning.

The resource http://localhost:8080/0.8546b380a69e057e76d2.hot-update.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.

How can this be fixed?

[Garito]

Yes, same here...

[anubhav7495]

Hi

This happens because the snippet we use to decide which files to preload or prefetch unintentionally catches the HMR specific files emitted by webpack during development.

This warning can be safely ignored as it will not happen in production builds.

Thanks

[Garito]

Any way to get rid of it?

[dortamiguel]

I usually have the console open and the warning gets my attention every time I open it, thinking there is a problem with my code. I think it's better to find a way to hide it.

[anubhav7495]

@ellipticaldoor @Garito You are welcome to submit a PR to fix this issue. Otherwise i will try to do this on this weekend. Thanks.

[dortamiguel]

@anubhav7495 okay! I will try it, can you give me a hint? I'm not very familiar with the project

[anubhav7495]

<% for (var chunk of webpack.chunks) {
        for (var file of chunk.files) {
          if (file.match(/\.(js|css)$/)) { %>
    <link rel="<%= chunk.initial?'preload':'prefetch' %>" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>"><% }}} %>

This snippet in index.html is responsible for preloading and prefetching. Ideal fix would be to somehow disable this in development.

[raulghm]

Same problem with recently installed version :(

[Garito]

Besides inline updates have stop to work You can notice it because the page is always reloading (losing state)

[raulghm]

@Garito you can test commenting this line in build/dev-server.js file? hotMiddleware.publish({ action: 'reload' })

Plus updating webpack to 3.8.1 if necessary and run again npm run dev

[Garito]

@raulghm this solution solves the inline updating but maintains the warning in the console

So far I care more about inline updating that the console warning

so thanks

But will be nice to make this warning go away (more giving the fact that seems it has no impact at all)

[MatiasArriola]

I came here trying to figure out why hot-reloading was not working for me. Commenting hotMiddleware.publish({ action: 'reload' }) as suggested made hot-reload work. Now I would like to make sure I'm not missing something by commenting that line!
Thanks

[jeffposnick]

Regarding @MatiasArriola's question, the fix should be https://github.com/vuejs-templates/pwa/pull/53 and will be deployed in the next release of this template.

[lukaszczerpak]

In my opinion https://github.com/vuejs-templates/pwa/pull/53 doesn't fully solve the problem. I synced my project with master and it didn't work. After commenting out hotMiddleware.publish({ action: 'reload' }) HMR started to work.