Fix webpack v4 issue where webpackHotUpdate is not defined on hard reload

[declanelcocks]

See here for related issue thread on webpack.

TLDR:

• Run npm run develop
• It builds & opens successfully
• Change something to emit update
• Webpack rebuilds successfully
• Update whole page with hard reload
• Receive webpackHotUpdate is not defined error in console

Seems that in webpack v3, new webpack.HotModuleReplacementPlugin(), works fine, but in v4 we need to add { multiStep: true }

[birkir]

Nice catch! Thank you

[williamoliveira]

Even with this fix I still see this error sometimes, its kinda intermittent

[williamoliveira]

Proof it still happens: https://youtu.be/kWI6YPANzVA?t=1m31s

[declanelcocks]

@williamoliveira any idea what situations are causing it? I haven't seen the error since adding this in yet. The issue on webpack is still quite new though, so maybe some more edge cases will crop up. The only suggestion so far on that issue from the core team was to make multiStep: true a default setting.

[SleepWalker]

If this issue is together with Webpack 4, this may be due to assets-webpack-plugin, which is a little bit outdated and has not so good logic for filtering updates. This plugin is used to resolve index chunk path for production build (but it is enabled for both dev and prod modes)

After updating to Webpack 4 it started to overwrite index file path in assets.json with hmr chunk path. The reason is that assets plugin detects hmr chunks with a regexp based on config.output.hotUpdateChunkFilename. Which seems to be undefined in Webpack 4 (or not enough valid. I was to busy for research).

So to fix this issue you need to add the following in configFactory.js:

let webpackConfig = {
    // ...
    // Bundle output configuration.
    output: {
      // ...
      hotUpdateChunkFilename: '[hash].hot-update.js', // use for AssetsPlugin to filter out hot updates
    },
    // ...
};

---

In future, it seems to be better to built-in use config.recordsPath and only for production mode, because during dev we have no hashes in file names. This should also allow to drop md5 chunk hash plugin

[williamoliveira]

@SleepWalker thank you very much, that did it

doc says the default value for this setting is '[id].[hash].hot-update.js' but with that value you get the error, '[hash].hot-update.js' works fine

[declanelcocks]

@SleepWalker or @williamoliveira Want to make a PR for it? If not, I can do it later.

[ctrlplusb]

Awesome @SleepWalker - I am all for dropping plugins! 👍 If we can take benefit of core Webpack functionality over existing plugins I would highly recommend we migrate towards this.

[SleepWalker]

@declanelcocks I've opened the PR. I left HotModuleReplacementPlugin with its defaults, because it should be enough to fix an issue with chunk path.

I am all for dropping plugins!

@ctrlplusb I will look into this, but not sure when. This may take some weeks.

[declanelcocks]

great @SleepWalker 👍