Hot reload triggered multiple times in a row when launching dev server

Hello!
I’m submitting a bug report

I’ve been using webpack for a long time and I’ve seen this behaviour on several mac OSX computers.
Sometimes, when launching the dev server (either with webpack-dev-server or webpack-dev-middleware), webpack enters a loop when it invalidates and reloads my bundle 3 to 12 times in a row.

This is difficult to reproduce because it happens randomly.
It seems to happen more frequently if I kill and restart my server a lot.
It looks like a race condition or an FS event bug.

I got this bug with webpack 1 as well as webpack 2 so all versions I used seem to have the same bug.

It’s not a dramatic issue but it’s quite annoying when it happens. I just wanted to make sure that you guys were aware of it and see if other people are experiencing this issue as well.

demo

Webpack version:
1 and 2

Please tell us about your environment:
OSX 10.11.6

Current behavior:
Webpack sometimes hot reloads multiple times in a row on first start.

Expected/desired behavior:
Webpack does not hot reloads on first start.

steps to reproduce

You can randomly see this behaviour with a simple boilerplate like this one.
I have seen it happen with isin/nwb, facebookincubator/create-react-app, etc…

Author: Fantashit

5 thoughts on “Hot reload triggered multiple times in a row when launching dev server

  1. I can confirm this bug. It happens about 1 of 5 times in the examples in webpack-dev-server, which use an extremely minimal config. I’m using OSX too.

  2. Also experiencing this issue. Seems to happen only on a start of the server after a hot reload happened. For example : start server, change a file, reload happens, stop server, then restart server > compiler builds a couple of times…

    My setup : dev server + webpack-hot-middleware via Node API

  3. To verify the issue the issue I am seeing in webpack-dev-server follow these steps

    • run npm install sleep
    • in node_modules/webpack-dev-server/lib/Server.js add require('sleep'); near the top of the file.
    • search for the line:
      this._sendStats([conn], this._stats.toJson(clientStats), true);
    • add the line sleep.msleep(1000); before the line above.

    This should make the issue disappear. It seems to be related to sockjs on Chrome. Basically when a reload is triggered the browser connects twice to sockjs server started a loop which triggers more reloads. Putting in a delay allows the first connection to go out of scope.

Comments are closed.