Regression in v3.0.7: breaks hot reloading in webpack-dev-server #900

LINKIWI · 2018-03-19T17:54:01Z

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: 26dcb98 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

The text was updated successfully, but these errors were encountered:

jantimon · 2018-03-19T18:54:21Z

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

LINKIWI · 2018-03-19T19:00:54Z

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

jantimon · 2018-03-19T20:25:29Z

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

hjeti · 2018-03-20T17:53:07Z

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.

jantimon · 2018-03-20T17:57:35Z

@LINKIWI @hjeti could you please try to replace

html-webpack-plugin/lib/compiler.js

Line 49 in df32593

 new SingleEntryPlugin(this.context, template, compilerName).apply(childCompiler); 

With

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

This would remove all whitespaces and quotes from the name.

sokra · 2018-03-20T18:01:29Z

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.

hjeti · 2018-03-20T18:04:12Z

@jantimon the path.basename fix works for me

LINKIWI · 2018-03-20T18:08:33Z

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

ghost · 2018-03-20T20:55:34Z

HMR nope.

jantimon · 2018-03-20T22:30:10Z

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

LINKIWI · 2018-03-20T23:22:10Z

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

jantimon · 2018-03-21T07:12:10Z

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

ghost · 2018-03-21T09:38:13Z

It looks like more than once.

jantimon · 2018-03-21T10:26:17Z

What would be your preferred solution?

LINKIWI · 2018-03-21T12:25:51Z

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)

jantimon · 2018-03-22T17:10:24Z

Released 3.0.8 (which is the same like 3.0.6)

ecanro · 2018-04-02T10:43:02Z

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-lifecycle\lib\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 ]

LINKIWI · 2018-04-02T12:39:34Z

@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'

ecanro · 2018-04-02T13:35:32Z

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

nitish24p · 2018-04-26T12:13:25Z

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

acwong00 · 2018-05-05T10:05:39Z

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

sergeymorkovkin · 2018-05-06T15:56:36Z

3.2.0 here, not working.

jantimon · 2018-05-09T06:23:11Z

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

lock · 2018-06-08T07:04:09Z

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.

jantimon mentioned this issue Mar 19, 2018

Webpack 4 Entrypoint undefined #895

Closed

jantimon added a commit that referenced this issue Mar 22, 2018

fix(compiler): Fallback to 3.0.7 because of #900

05ee29b

jantimon closed this as completed Mar 22, 2018

renovate bot mentioned this issue Apr 17, 2018

Update html-webpack-plugin to 3.2.0-abandoned sbardian/DebtTrackerAPI#10

Closed

lock bot locked as resolved and limited conversation to collaborators Jun 8, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Regression in v3.0.7: breaks hot reloading in webpack-dev-server #900

Regression in v3.0.7: breaks hot reloading in webpack-dev-server #900

LINKIWI commented Mar 19, 2018

jantimon commented Mar 19, 2018

LINKIWI commented Mar 19, 2018

jantimon commented Mar 19, 2018

hjeti commented Mar 20, 2018

jantimon commented Mar 20, 2018

sokra commented Mar 20, 2018

hjeti commented Mar 20, 2018

LINKIWI commented Mar 20, 2018

ghost commented Mar 20, 2018

jantimon commented Mar 20, 2018

LINKIWI commented Mar 20, 2018

jantimon commented Mar 21, 2018

ghost commented Mar 21, 2018

jantimon commented Mar 21, 2018

LINKIWI commented Mar 21, 2018

jantimon commented Mar 22, 2018

ecanro commented Apr 2, 2018 •

edited

Loading

LINKIWI commented Apr 2, 2018

ecanro commented Apr 2, 2018

nitish24p commented Apr 26, 2018

acwong00 commented May 5, 2018

sergeymorkovkin commented May 6, 2018

jantimon commented May 9, 2018

lock bot commented Jun 8, 2018

Regression in v3.0.7: breaks hot reloading in webpack-dev-server #900

Regression in v3.0.7: breaks hot reloading in webpack-dev-server #900

Comments

LINKIWI commented Mar 19, 2018

Summary

Config

Environment

jantimon commented Mar 19, 2018

LINKIWI commented Mar 19, 2018

jantimon commented Mar 19, 2018

hjeti commented Mar 20, 2018

jantimon commented Mar 20, 2018

sokra commented Mar 20, 2018

hjeti commented Mar 20, 2018

LINKIWI commented Mar 20, 2018

ghost commented Mar 20, 2018

jantimon commented Mar 20, 2018

LINKIWI commented Mar 20, 2018

jantimon commented Mar 21, 2018

ghost commented Mar 21, 2018

jantimon commented Mar 21, 2018

LINKIWI commented Mar 21, 2018

jantimon commented Mar 22, 2018

ecanro commented Apr 2, 2018 • edited Loading

LINKIWI commented Apr 2, 2018

ecanro commented Apr 2, 2018

nitish24p commented Apr 26, 2018

acwong00 commented May 5, 2018

sergeymorkovkin commented May 6, 2018

jantimon commented May 9, 2018

lock bot commented Jun 8, 2018

ecanro commented Apr 2, 2018 •

edited

Loading