HMR appears broken in 3.4.1 upgrading from 3.3.1

[PerfectionVR]

• Operating System: W10
• Node Version: 1.15.3
• yarnVersion: 1.15.2
• webpack Version: 4.32.1
• webpack-dev-server Version: 3.4.1

• [x ] This is a bug
• This is a modification request

Code

// webpack.config.js

// additional code, remove if not needed.

Expected Behavior

HRM is working.

[WDS] App updated. Recompiling...
client:146 [WDS] 0% - compiling.
2client:146 [WDS] 10% - building (0/0 modules).
client:146 [WDS] 10% - building (0/1 modules).
client:146 [WDS] 10% - building (0/2 modules).
client:146 [WDS] 40% - building (0/2 modules).
client:146 [WDS] 40% - building (1/2 modules).
client:146 [WDS] 40% - building (1/3 modules).
client:146 [WDS] 40% - building (1/4 modules).
client:146 [WDS] 40% - building (1/5 modules).
client:146 [WDS] 40% - building (2/5 modules).
client:146 [WDS] 40% - building (2/6 modules).
client:146 [WDS] 40% - building (3/6 modules).
client:146 [WDS] 40% - building (4/6 modules).
client:146 [WDS] 40% - building (5/6 modules).
client:146 [WDS] 40% - building (6/6 modules).
client:146 [WDS] 70% - building (6/6 modules).
client:146 [WDS] 70% - finish module graph.
client:146 [WDS] 70% - finish module graph (FlagDependencyExportsPlugin).
client:146 [WDS] 70% - sealing.
client:146 [WDS] 70% - sealing (WarnCaseSensitiveModulesPlugin).
client:146 [WDS] 71% - basic dependencies optimization.
client:146 [WDS] 72% - dependencies optimization.
client:146 [WDS] 72% - advanced dependencies optimization.
client:146 [WDS] 73% - after dependencies optimization.
client:146 [WDS] 70% - chunk graph.
client:146 [WDS] 71% - after chunk graph.
client:146 [WDS] 71% - after chunk graph (WebAssemblyModulesPlugin).
client:146 [WDS] 73% - optimizing.
client:146 [WDS] 74% - basic module optimization.
client:146 [WDS] 74% - module optimization.
client:146 [WDS] 75% - advanced module optimization.
client:146 [WDS] 75% - after module optimization.
client:146 [WDS] 76% - basic chunk optimization.
client:146 [WDS] 76% - basic chunk optimization (EnsureChunkConditionsPlugin).
client:146 [WDS] 76% - basic chunk optimization (RemoveParentModulesPlugin).
client:146 [WDS] 76% - basic chunk optimization (RemoveEmptyChunksPlugin).
client:146 [WDS] 76% - basic chunk optimization (MergeDuplicateChunksPlugin).
client:146 [WDS] 76% - chunk optimization.
client:146 [WDS] 77% - advanced chunk optimization.
client:146 [WDS] 77% - advanced chunk optimization (SplitChunksPlugin).
client:146 [WDS] 77% - advanced chunk optimization (RemoveEmptyChunksPlugin).
client:146 [WDS] 77% - after chunk optimization.
client:146 [WDS] 78% - module and chunk tree optimization.
client:146 [WDS] 78% - after module and chunk tree optimization.
client:146 [WDS] 79% - basic chunk modules optimization.
client:146 [WDS] 79% - chunk modules optimization.
client:146 [WDS] 80% - advanced chunk modules optimization.
client:146 [WDS] 80% - after chunk modules optimization.
client:146 [WDS] 81% - module reviving.
client:146 [WDS] 81% - module reviving (RecordIdsPlugin).
client:146 [WDS] 81% - module order optimization.
client:146 [WDS] 82% - advanced module order optimization.
client:146 [WDS] 82% - before module ids.
client:146 [WDS] 82% - before module ids (NamedModulesPlugin).
client:146 [WDS] 83% - module ids.
client:146 [WDS] 83% - module id optimization.
client:146 [WDS] 84% - module id optimization.
client:146 [WDS] 84% - chunk reviving.
client:146 [WDS] 84% - chunk reviving (RecordIdsPlugin).
client:146 [WDS] 85% - chunk order optimization.
client:146 [WDS] 85% - chunk order optimization (OccurrenceOrderChunkIdsPlugin).
client:146 [WDS] 85% - before chunk ids.
client:146 [WDS] 85% - before chunk ids (NamedChunksPlugin).
client:146 [WDS] 86% - chunk id optimization.
client:146 [WDS] 86% - after chunk id optimization.
client:146 [WDS] 87% - record modules.
client:146 [WDS] 87% - record modules (RecordIdsPlugin).
client:146 [WDS] 87% - record chunks.
client:146 [WDS] 87% - record chunks (RecordIdsPlugin).
client:146 [WDS] 88% - hashing.
client:146 [WDS] 88% - content hashing.
client:146 [WDS] 88% - content hashing (JavascriptModulesPlugin).
client:146 [WDS] 89% - after hashing.
client:146 [WDS] 89% - after hashing (HotModuleReplacementPlugin).
client:146 [WDS] 89% - record hash.
client:146 [WDS] 90% - module assets processing.
client:146 [WDS] 90% - chunk assets processing.
client:146 [WDS] 91% - additional chunk assets processing.
client:146 [WDS] 91% - additional chunk assets processing (HotModuleReplacementPlugin).
client:146 [WDS] 91% - recording.
client:146 [WDS] 91% - recording (HotModuleReplacementPlugin).
client:146 [WDS] 92% - additional asset processing.
client:146 [WDS] 92% - chunk asset optimization.
client:146 [WDS] 93% - after chunk asset optimization.
client:146 [WDS] 93% - asset optimization.
client:146 [WDS] 94% - after asset optimization.
client:146 [WDS] 94% - after seal.
client:146 [WDS] 95% - emitting.
client:146 [WDS] 95% - emitting (HtmlWebpackPlugin).
client:146 [WDS] 98% - after emitting.
client:146 [WDS] 100% - Compilation completed.
client:170 [WDS] Warnings while compiling.
warnings @ client:170
onmessage @ socket.js:40
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:887
SockJS._transportMessage @ sockjs.js:885
EventEmitter.emit @ sockjs.js:86
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:887
SockJS._transportMessage @ sockjs.js:885
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2961
client:265 [WDS] App hot update...
log.js:24 [HMR] Checking for updates on the server...
log.js:24 [HMR] Updated modules:
log.js:16 [HMR]  - ./src/app/components/header/header.scss
log.js:24 [HMR] App is up to date.

Actual Behavior

HRM is not working.

[HMR] Waiting for update signal from WDS...
 ... application logging follows

No updates, no WDS messages, whatsoever.

For Bugs; How can we reproduce the behavior?

Due to the nature of the project I'm working on I cannot share actual code, however. I'm experiencing a regression by upgrading from "webpack-dev-server": "3.3.1", to "webpack-dev-server": "^3.4.1",

I'm not the only one who is experiencing this.
#1897 (comment) But it was dismissed in that thread.

Our current workaround is to keep 3.3.1 pinned until this is resolved.

[hiroppy]

Please submit the reproduceable repo.

[alexander-akait]

Without reproducible test repo we can't help and issue was closed, please provide minimum reproducible test repo

[GitNomster]

Same thing. HMR not working in v. 3.4.1

[croissong]

@evilebottnawi I can confirm that this works!

[alexander-akait]

Somebody can create minimum reproducible test repo otherwise issue was closed

[alexander-akait]

/cc @GitNomster @croissong friendly ping, problem still exists? Can you create minimum reproducible test repo?

[vespakoen]

Can confirm, with very standard setup. websocket seems to be broken, with 3.3.1 I get a bunch of "sock-js" debug messages (with window.localStorage.debug = '*') and with 3.4 there is none at all.

Don't close.

[alexander-akait]

@vespakoen Please create minimum reproducible test repo, maybe you have invalid configuration

[vespakoen]

npm start:

webpack-dev-server --config cep.config.js

my cep.config.js is generated through an extension that I am using, but here is a console.dir of it anyways:

{ entry: './src/js/index.tsx',
  module:
   { rules:
      [ { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ },
        { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] },
        { test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader' ] },
        { test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ 'file-loader' ] } ] },
  resolve: { extensions: [ '.tsx', '.ts', '.js', '.json' ] },
  mode: 'development',
  devServer:
   { contentBase: '/Users/koen/Projects/myproject/dist',
     hot: true,
     port: 8080,
     host: 'localhost' },
  output:
   { filename: 'cep.js',
     path: '/Users/koen/Projects/myproject/dist' },
  devtool: 'eval-source-map',
  plugins:
   [ { apply: [Function: apply] },
     CopyPlugin { patterns: [ { from: 'public/', to: '.' } ], options: {} },
     CepWebpackPlugin {
       props:
        { devPort: 8080,
          devHost: 'localhost',
          env: undefined,
          root: undefined,
          htmlFilename: undefined,
          pkg: undefined,
          isDev: true } },
     HtmlWebpackPlugin {
       options:
        { template:
           '/Users/koen/Projects/myproject/node_modules/html-webpack-plugin/default_index.ejs',
          templateParameters: [Function: templateParametersGenerator],
          filename: 'index.html',
          hash: false,
          inject: true,
          compile: true,
          favicon: false,
          minify: false,
          cache: true,
          showErrors: true,
          chunks: 'all',
          excludeChunks: [],
          chunksSortMode: 'auto',
          meta: {},
          title: 'Extension',
          xhtml: false } },
     EnvironmentPlugin {
       keys:
        [ 'npm_config_save_dev',
          ... 129 more items ],
       defaultValues: {} },
     HotModuleReplacementPlugin {
       options: {},
       multiStep: undefined,
       fullBuildTimeout: 200,
       requestTimeout: 10000 },
     WrapperPlugin {
       header:
        "if (typeof window !== 'undefined' && window.hasOwnProperty('cep_node')) {\t\n  require = window.cep_node.require\t\n  Buffer = window.cep_node.Buffer\t\n  process = window.cep_node.process\t\n  __dirname = window.cep_node.__dirname\t\n}",
       footer: '',
       afterOptimizations: false,
       test: '' } ],
  target: 'node-webkit',
  externals: [ [Function] ],
  optimization: { minimize: false } }

Hope it helps

[vespakoen]

To be clear, HMR works fine in 3.3.1, using no arguments, e.g.: new webpack.HotModuleReplacementPlugin()

And stopped working in 3.4

[alexander-akait]

@vespakoen you use target: 'node-webkit', you should change this on web or webworker or use injectClient option to control client entry

[croissong]

What i meant was, that configuring watchOptions: { ignored: ['node_modules', '!node_modules/my_module'] } solved the issue for me :)

[vespakoen]

Thanks for that, isn't that a breaking change that deserves a major version increment then? What is the rationale of excluding node-webkit from injectHot / injectClient?

[alexander-akait]

I think it is bug and we should enable hot for node-webkit

/cc @hiroppy

[GitNomster]

@evilebottnawi i'm using target: 'electron-main'. HMR only works in 3.3.1. Should i change target too?

[alexander-akait]

@GitNomster interesting question, electron-main supports hmr?

[GitNomster]

@evilebottnawi I don't know, but in the 3.3.1 it works.

[alexander-akait]

@GitNomster try to change target on web

[alexander-akait]

I am closing this issue, because original issue doesn't have minimum reproducible test repo, other problems is very difference. If you still have problem please open new issue with reproducible test repo, thanks.

Don't forget check you target. We include client for HMR only for web and webworker.

[vespakoen]

Even setting the target to web, adding injectHot / injectClient options to true doesn't make HMR work on 3.4 for me..., please re-open

-- EDIT --

Scrap that, I forgot to re-npm-link my stuff, so I wasn't checking it correctly, works now with web target

[alexander-akait]

@vespakoen #1912 (comment)

[vespakoen]

Sorry for that, my mistake ;)

[ije]

Don't forget check you target. We include client for HMR only for web and webworker.

even electron-renderer except? i run my app in electron window if i change it to web i can not load
node modules...

[alexander-akait]

@ije sounds like a bug, can you create minimum reproducible test repo?

[ije]

@evilebottnawi

here is the test repo: https://github.com/ije/hmr-3.4-on-electron-renderer

yarn install
yarn start

[alexander-akait]

@ije thanks for issue, it is bug, we should add client for electron-renderer, i am not familiar with electron, can you give advice about electron-preload target, should we include client too?

[ije]

@evilebottnawi Thanks! i have no idea about electron-preload target... i can't find it in the configuration. sometimes we need to access to node APIs but we disabled the node integration, so we need the preload option. usually i will put it in the electron main package.

[alexander-akait]

@ije 👍

If somebody have problem with target too feel free to open new issue with reproducible test repo, it is bug and regression so don't afraid report about this

[GitNomster]

@evilebottnawi How about to add electron-main target. It is used for webpack config.

[alexander-akait]

@GitNomster can you prove example?

[alexander-akait]

Reproducible test repo enough

[hawkeye64]

Please publish this fix ASAP. Thanks.

[alexander-akait]

@hawkeye64 What? We only add electron-renderer target, please provide you targets

[alexander-akait]

https://github.com/webpack/webpack-dev-server/releases/tag/v3.5.0

[hawkeye64]

@evilebottnawi Thank you. We'll begin testing today.