Hot reload fails without warning when another webpack dev server is already running

[tylercollier]

I just spent the last 3 hours debugging why hot module reloading (HMR) wasn't working on my project's storybook. I even tried using the react-storybook-demo and saw the same results.

Turns out it's because I had webpack-dev-server running already as part of my project. I use webpack-dev-server (WDS) for its hot-reloading, and it runs on the standard 8080. When I run react-storybook, it looks like it's working fully:

$ npm run storybook

> [email protected] storybook /home/tylercollier/my-project
> start-storybook -p 9001

=> Loading custom .babelrc
=> Loading custom webpack config (full-control mode).

React Storybook started on => http://localhost:9001/

webpack built 9e3134e7ed7e5f6d5f42 in 2468ms

... but file changes are not seen by Storybook, as far as what's shown on the command line. Really, I should be told at that point if Storybook's will not be able to use HMR.

If I run Storybook and another webpack dev server is NOT running, Storybook's HMR works as expected. If I start Storybook first, and then run my project with its own WDS, the project's WDS does not even see file changes. If I start my project's WDS, and then Storybook, Storybook's WDS does not see file changes.

[tylercollier]

After more research, what's odd is that the port that my project runs WDS on does not change the conflict I described above. E.g. if I run WDS on port 8081 instead of port 8080, I see the same results: whichever process I start first works as expected (file changes are seen and thus HMR works), and whichever process starts second does not work.

I'm wondering if this has something to do with how webpack-hot-middleware works.

Since the problem seems to stem from file watching problems, I tested my experience with Storybook in one project, but using another project's WDS. The two projects were in sibling directories, so I'm thinking file watch problems could not be an issue here. I saw the same results.

Diagnosing is further complicated by no HMR console logging in the browser, which is a recent change in react-storybook.

[arunoda]

I tried locally and I couldn't reproduce this locally. Everything seems working fully.
It may be issue with your OS's open file count or something.

Try to increase the open file limit.

[tylercollier]

You're right. Thanks. Would it be possible to issue a warning message of some kind if the watcher fails? For example, if nodemon is unable to watch files, it reports:

[nodemon] Internal watch failed: watch /home/tylercollier/my-project/server.js EMFILE

[arunoda]

@tylercollier That's basically managed by the webpack. Not sure why they don't output the warning. Normally, it does fire errors and warnings.

[omeryagmurlu]

I'm experiencing this too, why was this closed?