webpack --watch isn't compiling changed files

Question

I tried running webpack --watch and after editing my JS files, it doesn't trigger an auto-recompilation.

I've tried reinstalling webpack using npm uninstall but it's still not working.

Any ideas?

Answer 1

If your code isn't being recompiled, try increasing the number of watchers (in Ubuntu):

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

Source: https://webpack.github.io/docs/troubleshooting.html

Answer 2

FYI: it seems OS X can have a folder get corrupted and no longer send fsevents (which watchpack/chokidar/Finder uses) for itself and any child folders. I can't be sure this is what happened to you, but it was very frustrating for me and a colleague.

We were able to rename the corrupt parent folder and then watch events immediately came through as expected. See this blog post for more info: http://livereload.com/troubleshooting/os-x-fsevents-bug-may-prevent-monitoring-of-certain-folders/

The recommended fixes from the above link are:

• rebooting the computer
• checking the disk and repairing permissions via Disk Utility
• adding the folder to Spotlight privacy list (the list of folders to not index), and then removing from it, effectively forcing a reindexing
• renaming the folder, and then possibly renaming it back
• re-creating the folder and moving the old contents back into it

First two did not work for us, didn't try the Spotlight suggestion, and the re-creation did not prove necessary.

We were able to find the root problem folder by opening Finder and creating files in each successive parent folder until one showed up immediately (since Finder will get hosed by this bug as well). The root-most folder that does not update is the culprit. We just mv'd it and mv'd it back to its original name, and then the watcher worked.

No idea what causes the corruption, but I'm just glad to have a fix.

Answer 3

Adding the following code to my webpack configuration file fixed the issue for me. Don't forget to ignore your node_modules folder, as that would kill performance for HMR (Hot Module Replacement):

watchOptions: {
  poll: true,
  ignored: /node_modules/
}

Answer 4

I have had this problem when working with WebStorm.

Disabling Settings -> System Settings -> "safe write" resolved it for me.

Found the recommendation to do so in: WebPack Troubleshooting

Answer 5

Folder case sensitivity was my issue. My code calls to require() had all lowercase path names BUT the actually directories had an uppercase letter in them. I renamed all my directories to lowercase and webpack watching worked instantly.

Answer 6

Just to add to possible solutions: I had my project folder inside a Dropbox folder, moving it out solved the problem for me. (OS X)