Webpack-dev-server: Webpack dev server stuck in hot update or not triggering update on save

[cristisp]

Hi,

I had some problems even in 0.10 with updates not triggering on file save sometimes but this seems to happen way more often with the latest versions. But my biggest problem is that on hot updates it seems to become stuck and I need to manually refresh the page to get the update on screen.

[WDS] App updated. Recompiling...
client:87 [WDS] App hot update...

Any way around this?

[jamesdwilson]

:+1: having same problem

[Stas404]

+1

[danamajid]

Instead of using the hot: true flag, just add the hot module replacement plugin to your webpack.config.js

[Elijen]

Having the same problem after upgrading to Webpack2. I tried to remove the --hot flag and use new webpack.HotModuleReplacementPlugin() in plugins, but no luck.

@danamajid Do you know if there is anything else I need to do after migrating from Webpack1?

[riccardolardi]

Any update on this? Having same issue but strangely only when editing html files. JS files trigger HMR correctly 🤔

[jusefb]

Having the same issue here with webpack 2

[jin5354]

Having the same problem after upgrading to Webpack2.

[crohlfs]

Works for me after using both --hot and new webpack.HotModuleReplacementPlugin() (even though guides seem to say only use either) and having a webpack/hot/dev-server entry as outlined here

[oller]

Has anyone else got a definitive solution for this, I'm pretty sure I've tried every possible combination of:

• CLI options hot/hotOnly/inline (which I do via grunt-webpack options),
• adding/removing the webpack.HotModuleReplacementPlugin()
• adding/removing the webpack-dev-server entry points.

Unfortunately I can't replicate @crohlfs success!

The closest I can get is using just the hotOnly options so in the CLI: --hotOnly --inline, then the plugin webpack.HotModuleReplacementPlugin() defined and just the "webpack/hot/only-dev-server" added to the entry points array. This will get styles hot replacing, however it limits the dev-server into only refreshing when it can hot replace, and this is not a react app, so a JS change just fires up a console.warn that this change would require a refresh, i.e. I need full hot mode, which I used to have with v1, hot replacing for styles - auto refreshing for js/html updates.

Versions

"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.5"

[crohlfs]

My setup has changed a bit since then, can't remember why. My current solution is:

• new webpack.HotModuleReplacementPlugin() in my plugins list
• a devServer entry in my webpack.config.js, I think you will need to have at least hot: true and inline: true
• and I run it with node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js as an npm script

If you have it full refreshing it could mean you aren't watching for/applying the changes properly with the module.hot.accept callback. Using ES6 modules I do it as follows:

if (module && module.hot) {
  module.hot.accept('./reducer', () => {
    store.replaceReducer(rootReducer);
  })
}

My object rootReducer is defined as import rootReducer from './reducer';
Inside the callback it is automatically reimported with the hot reloaded changes (or any changes it depends on) and I put a line of code there to tell it how to apply the new rootReducer over the old one.

If you ever get the page full refreshing like that you should be able to figure out why from the console.

[mauron85]

I was facing same problem. In my case I was just missing webpack-dev-server dependency. Chrome console was actually showing '[WDS] App hot update...', so I'had feeling everything is ok, but no module was reloaded. Installing npm i webpack-dev-server --save-dev resolved my problem.

[roz0n]

Hey guys, I ran into this issue today as well with an older React project where I didn't use create-react-app. I stitched together a few solutions from some Stack posts and ultimately did as @mauron85 instructed and it finally works. Here's my webpack.config.js in case others stumble upon this issue.

Note: I am starting the dev server with webpack-dev-server --hot --inline

```var path = require('path');

module.exports = {
entry: [
'./src/index.js'
],
devServer: {
publicPath: "/",
contentBase: "./dist",
hot: true
},
output: {
path: path.join(__dirname, '/dist'),
filename: 'bundle.js',
publicPath: "/"
},
devtool: 'source-map',
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: { presets: ['react']}
}
]
}
}

[davvidbaker]

Ran into this issue tonight too. Solution ended up being the exact same as @mauron85. I have webpack-dev-server installed globally, so the browser console was showing signs of life, but those should not have been trusted! ⚠Beware misleading WDS messages from the console⚠!

[fanyang89]

The problem can be solved by cleaning up system temporary files.

[rastogiachyut]

I fixed this by increasing the number of watchers using:
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

[xiayx]

I forgot to use the command npm install webpack --save-dev,
when i installed webpack-dev-server, warn [email protected] requires a peer of webpack@^2.2.0 || ^3.0.0 but none was installed., but I thought I had it installed, Actually not

[nosir]

Ran into the same issue, @mauron85 's solution solved it

[krini]

Removing the --hot flag solved my issue

[mersanuzun]

After 5 hours, I have solved the problem with removing 'hot: true' from options for WebDevServers constructor.

const devServer = new WebpackDevServer(compiler, {
      publicPath: `http://0.0.0.0:${this.port}/`,
      hot: true, // Removed
      historyApiFallback: true,
      stats: {
        colors: true,
        chunks: false
      },
      headers: { "Access-Control-Allow-Origin": "*"}
    });

[mersanuzun]

Another issue occurred. When I change style, page is reloaded. I don't want to reload page, only need hot reload.

[keitetran]

who can fix this bug :( vuex need hot reload for dev without browser reload :(

[DevCubeHD]

Problem still alive, just sayin

[DevCubeHD]

https://stackoverflow.com/questions/51813399/static-webpage-webpack-hotloader-does-not-work