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

[ezze]

I don't use Hot Module Replacement but seems that I have a related issue with webpack-dev-server. It doesn't detect changes in my scoped @geoapps packages located in node_modules (though detects changes in src). It doesn't matter whether my scoped packages are symlinked or installed to node_modules directly. Downgrading webpack-dev-server to 3.3.1 fixes the issue.

An essential part of my configuration:

export default {
  context: path.resolve(__dirname, 'src'),
  entry: {
    index: ['babel-polyfill', './index.js']
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].' + (mode === 'development' ? '' : '[chunkhash:6].') + 'js'
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    port: PORT
  },
  module: {
    rules: [{
      test: /\.js$/,
      use: 'babel-loader',
      include: [
        path.resolve(__dirname, 'src'),
        path.resolve(__dirname, 'node_modules/react-cestbleu-popup/src'),
        /node_modules\/@geoapps\/[a-z0-9-]+\/src\//
      ]
    }]
  },
  resolve: {
    symlinks: false,
    modules: ['node_modules'],
    extensions: ['.js']
  },
  resolveLoader: {
    modules: ['node_modules'],
    moduleExtensions: ['.js']
  },
  externals: {
    cesium: 'Cesium'
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /node_modules/,
          chunks: 'initial',
          name: 'vendor',
          enforce: true
        }
      }
    },
    runtimeChunk: true
  },
  plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.DefinePlugin({
      VERSION: JSON.stringify(packageJson.version),
      'process.env.NODE_ENV': JSON.stringify(mode),
      NODE_ENV: JSON.stringify(mode),
      PROTECT_BY_EXPIRATION: JSON.stringify(PROTECT_BY_EXPIRATION),
      EXPIRATION_MONTHS,
      BUILD_TIME: new Date().getTime()
    }),
    new MiniCssExtractPlugin({
      filename: `css/${mode === 'development' ? '[name].css' : '[name].[hash:6].css'}`,
      chunkFilename: `css/${mode === 'development' ? '[name].css' : '[name].[hash:6].css'}`
    }),
    new HtmlPlugin({
      filename: path.resolve(__dirname, 'dist/index.html'),
      inject: false,
      template: htmlTemplate,
      title: 'GeoPort',
      meta: [{
        'http-equiv': 'Cache-Control',
        content: 'no-cache, no-store, must-revalidate'
      }, {
        'http-equiv': 'Pragma',
        content: 'no-cache'
      }, {
        'http-equiv': 'Expires',
        content: '0'
      }],
      appMountId: 'container',
      scripts: ['cesium/Cesium.js'],
      minify: {
        collapseWhitespace: mode === 'production'
      }
    }),
    new FaviconsWepbackPlugin(
      path.resolve(__dirname, 'src/favicon.png')
    ),
    new webpack.ProvidePlugin({
      'Opentip': 'opentip/lib/opentip'
    }),
    new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en-gb|ru/)
  ],
  devtool: mode === 'development' ? 'source-map' : false
}

[alexander-akait]

@ezze hot !== watch, we ignore node_modules by default, you can solve problem using #1913

[ezze]

@evilebottnawi, thanks for pointing it out. Setting watchOptions: { ignored: [] } fixes my issue.

[alexander-akait]

@ezze don't forget watching node_modules can overload your machine

[ezze]

@evilebottnawi, is it possible to ignore whole node_modules excepting few subdirectories?

[alexander-akait]

@ezze watchOptions: { ignored: ['node_modules', '!node_modules/my_module'] } in theory should be work, but need tests

[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