Html-webpack-plugin: Regression in v3.0.7: breaks hot reloading in webpack-dev-server

Created on 19 Mar 2018 · 24Comments · Source: jantimon/html-webpack-plugin

Summary

Hi there, I just upgraded to v3.0.7 and noticed that hot reloading via webpack-dev-server has broken in a development environment.

Steps: Start webpack-dev-server, edit a watched source file
Expected behavior: Observe that the bundle re-compiles, and the updated bundle is served to the browser.
Actual behavior as of 3.0.7: Observe that the bundle re-compiles, but the updated bundle is not served to the browser. Note that no errors or warnings are logged.
The expected behavior and actual behavior are identical in 3.0.6 and earlier.

The only change moving from 3.0.6 -> 3.0.7 is pretty minor: 26dcb98f1522e8da79e4befc24f0875bd6ef0bbc not sure if it is directly related.

I haven't had time yet to whip up a full MCVE, but here are some snippets of config and environment to help provide context:

Config

Irrelevant portions of the config are snipped.

webpack.config.js:

module.exports = {
  entry: {
    main: ...,
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: '[name].js',
  },
  module: {
    rules: [
      {
        test: /src\/.+\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
      },
    ],
  },
  plugins: [
    ...
    new HTMLWebpackPlugin({
      template: 'src/resources/templates/index.html',
      inlineSource: '.js$',
    }),
    new HtmlWebpackInlineSourcePlugin(),
  ].filter(Boolean),
  devServer: {
    historyApiFallback: true,
    publicPath: '/',
  },
};

And the template index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"
    />
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Environment

Operating system: linux 4.13.0-37-generic
Node: 8.9.0
npm: 5.6.0
Webpack version: 4.1.1
Library version: 3.0.7

Source

LINKIWI

Most helpful comment

It looks like more than once.

ghost on 21 Mar 2018

👍3

All 24 comments

Is it fixed if you remove the compilerName parameter from the single entry plugin in your node_modules/html-webpack-plugin/lib/compiler.js ?

jantimon on 19 Mar 2018

Yes, it does seem that removing the compilerName parameter causes hot reloading to work correctly, and adding it back breaks it.

LINKIWI on 19 Mar 2018

Could you please try to reach out for maintainers of HMR or dev server?
I don’t understand why setting a name might cause these problems.
Maybe @sokra knows why

jantimon on 19 Mar 2018

This same change also breaks the stats json that is outputted by the WebpackBundleAnalyzer. So it's not possible to analyze builds anymore when you have version 3.0.7 installed of the html-webpack-plugin. The json that is outputted is not valid json:

"assetsByChunkName": { "html-webpack-plugin for " index.html "": "index.html" },

It works again when I remove the compilerName parameter. I think these issues are somehow related that's why I added this as a comment and not as a separate issue.

hjeti on 20 Mar 2018

@LINKIWI @hjeti could you please try to replace
https://github.com/jantimon/html-webpack-plugin/blob/df32593b59afa172dd59e8997f560a02588bfaf9/lib/compiler.js#L49

With

new SingleEntryPlugin(this.context, template, path.basename(outputFilename)).apply(childCompiler);

This would remove all whitespaces and quotes from the name.

jantimon on 20 Mar 2018

I don't know. Weird. I could image this is caused either by ", / or spaces in the chunk name. For the mini-css-extract-plugin I used * as entry name. That worked fine.

sokra on 20 Mar 2018

@jantimon the path.basename fix works for me

hjeti on 20 Mar 2018

@jantimon Unfortunately that patch does not seem to fix the HMR issue.

LINKIWI on 20 Mar 2018

HMR nope.

ghost on 20 Mar 2018

Could you please try to use ‘*’ like @sokra proposed?

jantimon on 20 Mar 2018

Changing the entry name to '*' also does not seem to fix the HMR issue :/

LINKIWI on 21 Mar 2018

Sry I have no idea what causes this behavior and it was reported only once for now.

jantimon on 21 Mar 2018

It looks like more than once.

ghost on 21 Mar 2018

👍3

What would be your preferred solution?

jantimon on 21 Mar 2018

I understand that webpack-dev-server is an independent project and interoperability with it is not necessarily a priority of this plugin. However, given its popularity, perhaps it would be worth adding a note in documentation (maybe for the changelog entry of 3.0.7) that the latest version breaks compatibility with HMR, and that interested users should pin an older version. (At least until the problem is sorted out)

LINKIWI on 21 Mar 2018

👍2

Released 3.0.8 (which is the same like 3.0.6)

jantimon on 22 Mar 2018

Hello, install the latest version 3.1.0, and for me, it is still giving the same error but now it shows a new line:
[email protected] build E:\Apps\React\reacttr

webpack --colors

Hash: 919fb45ad88b262d4ead
Version: webpack 4.1.1
Time: 419ms
Built at: 2018-4-2 11:14:27
1 asset
Entrypoint main = app.js
[0] multi ./src/index.jsx 28 bytes {0} [built]

WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

ERROR in multi ./src/index.jsx
Module not found: Error: Can't resolve './src/index.jsx' in 'E:\Apps\React\reacttr'
@ multi ./src/index.jsx
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[0] (webpack)/buildin/module.js 519 bytes {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] ./node_modules/html-webpack-plugin/lib/loader.js!./src/assets/index.html 708 bytes {0} [built]
+ 1 hidden module
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: webpack --colors
npm ERR! Exit status 2

this is my log file:
0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 info lifecycle [email protected]~build: [email protected]
7 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~build: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;E:\Apps\React\reacttr\node_modules.bin;C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;E:\Apps\React\reacttr\node_modules.bin;C:\ProgramData\Oracle\Java\javapath;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\ProgramData\ComposerSetup\bin;C:\Program Files\Git\cmd;C:\Program Files\Intel\WiFi\bin\;C:\Program Files\Common Files\Intel\WirelessCommon\;C:\xampp\php;C:\ProgramData\chocolatey\bin;C:\Program Files\nodejs\;C:\Program Files (x86)\Yarn\bin\;C:\RailsInstaller\Git\cmd;C:\RailsInstaller\Ruby2.2.0\bin;C:\Users\Edgar Calderon\AppData\Local\Microsoft\WindowsApps;C:\Users\Edgar Calderon\AppData\Roaming\Composer\vendor\bin;C:\Program Files\Microsoft VS Code\bin;C:\Program Files\Intel\WiFi\bin\;C:\Program Files\Common Files\Intel\WirelessCommon\;C:\Users\Edgar Calderon\AppData\Local\atom\bin;C:\Users\Edgar Calderon\AppData\Roaming\npm;C:\Users\Edgar Calderon\AppData\Local\Yarn\bin
9 verbose lifecycle [email protected]~build: CWD: E:\Apps\React\reacttr
10 silly lifecycle [email protected]~build: Args: [ '/d /s /c', 'webpack --colors' ]
11 silly lifecycle [email protected]~build: Returned: code: 2 signal: null
12 info lifecycle [email protected]~build: Failed to exec build script
13 verbose stack Error: [email protected] build: webpack --colors
13 verbose stack Exit status 2
13 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:285:16)
13 verbose stack at EventEmitter.emit (events.js:180:13)
13 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecyclelib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:180:13)
13 verbose stack at maybeClose (internal/child_process.js:936:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:220:5)
14 verbose pkgid [email protected]
15 verbose cwd E:\Apps\React\reacttr
16 verbose Windows_NT 10.0.16299
17 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build"
18 verbose node v9.9.0
19 verbose npm v5.6.0
20 error code ELIFECYCLE
21 error errno 2
22 error [email protected] build: webpack --colors
22 error Exit status 2
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2, true ]

ecanro on 2 Apr 2018

@ecanro That looks like an error in your Webpack configuration, unrelated to this plugin. The error is shown to you very clearly:

ERROR in multi ./src/index.jsx
Module not found: Error: Can't resolve './src/index.jsx' in 'E:\Apps\React\reacttr'

LINKIWI on 2 Apr 2018

Yes, you are right! Now it works when the file is created, can close this issue

ecanro on 2 Apr 2018

I have 3.2.0 installed and i still have the same issue..HMR has stopped working

nitish24p on 26 Apr 2018

👍1

It looks like webpack-dev-server's bug?

acwong00 on 5 May 2018

3.2.0 here, not working.

sergeymorkovkin on 6 May 2018

@nitish24p @sergeymorkovkin this issue is about a change in 3.0.7 which was already reverted. So your problem is very very likely not related to this issue.

Please open a new issue with the expected and actual behaviour.
It is also very likely that your issue is not related to this plugin but rather to your dev server.

jantimon on 9 May 2018

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.