Vscode: webpack-dev-server doesn’t pick up changes when editing with VSCode, other editor works

[kleinfreund]

• VSCode Version: Code 1.16.1 (27492b6bf3acb0775d82d2f87b25a93490673c6d, 2017-09-14T16:26:20.018Z)
• OS Version: Linux x64 4.10.0-35-generic
• Extensions:

Extension|Author (truncated)|Version
---|---|---
vscode-eslint|dba|1.3.1
prettier-vscode|esb|0.23.1
sublime-keybindings|ms-|2.9.1

(1 theme extensions excluded)

---

In a project, I have a package.json defining npm start as a script to run node_modules/.bin/webpack-dev-server --config webpack.dev.js. Whenever I save a changed JS/CSS file, this will create a new JS/CSS bundle and reload the application that is open in a browser tab.

When changing a file within VSCode, the webpack-dev-server does not detect a change, either when using the integrated or an external terminal.

When changing a file within another editor, everything works as expected. But there is a twist. When I start VSCode now and run the npm task from there (interrupting the other one before), it works in VSCode as well.

But, when I close VSCode and open it again, running the npm task again, it no longer works.

I don’t know how I could make this easily reproducable for you. Also, I’m very sorry as this is not really a helpful report. Maybe you can give me some advice how I can pin this one down properly. Maybe it’s not an issue after all.

Reproduces without extensions: Yes

[dbaeumer]

This is not task related since @kleinfreund starts the npm script either from an external or the internal terminal.

I actually don't know what the problem is. Could be how VS Code saves files.

@kleinfreund can you enable some tracing in the webpack-dev-server to see if it receives file events ?

[kleinfreund]

@dbaeumer I see what I can do about that. Will get back if I have some results. Without it, webpack is not printing anything when I save a file.

[kleinfreund]

While searching for ways to get webpack-dev-server to show me some more information, I found this comment in a similar issue https://github.com/webpack/webpack-dev-server/issues/155#issuecomment-159140735. I ignored it before, since it seemed to be Windows-specific.

However, the command from this comment helps: When adding --watch-poll to my script for npm start, webpack-dev-server starts to pick up changes from within VSCode.

[larsklingsten]

on ubuntu 16.04 (perhaps other Linux'es) this may be related to restrictions on how many files that can be monitored by the linux kernel. Had a similar issue on a "dotnet core/angular" solution - with webpack-hot-reloading.

"Fixed" it with

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

if there is a real non-sudo solution, I should be pleased to hear.

[sigsiroos]

@larsklingsten I sat with this problem today and your solution fixed the issue for me (this was on Ubuntu 17.10)
I didn't quite understand what you meant with

how many files a user can "hold"

Could you ellaborate for me? I would love to understand what is going on here :)

[larsklingsten]

@sourysanis
Take the "max_user_watches" as the maximum number of files that can be monitored for change. As the files monitored by "--watch-poll" exceeds the standard limit of 8192 files (on Ubuntu 17.10), we need to change the maximum number of files. The 524288 is the maximum allowed. (I updated my reply above)

You can check settings (before and after)

cat /proc/sys/fs/inotify/max_user_watches
For memory usage you can refer to this
link

[dbaeumer]

@larsklingsten thanks for providing the information.

I will close the issue since the monitoring issue under Linux is not related to VS Code.