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?

score 92 · Accepted Answer · edited Nov 19 '20 at 19:11

92

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.

edited Nov 19 '20 at 19:11

Francis Upton IV

19,322
3
53
57

answered Feb 19 '15 at 15:24

Ben Mosher

13,251
7
69
80

3

I renamed my ~/Sites folder to something else, and then back to ~/Sites and it fixed the error. It also has fixed several other errors on other projects. Talk about killing 2 birds with 1 stone. Thank you so much!!! – Kirk May 18 '15 at 21:09
I faced this issue while working with `watchify`, none of the steps worked with me so I ended up using poll arg. A lot of people are passing the poll arg to browserify instead of watchify. My code looks like: `watchify(browserify(config.src,{}), {poll:100});` – Ayman Jun 04 '15 at 15:59
1

Not 100% sure this is the reason, but turning off my Dropbox sync client while trying to run watchify worked for me. Both running `npm install` as well as renaming a directory are very intensive operations the way the sync client is implemented. – jez Aug 09 '15 at 00:13
Restarting worked for me on Linux, I had this issue with webpack-dev-server, after hours of trying to work out why it was working yesterday but not today... – DomA Aug 19 '15 at 13:30
IIRC, `webpack-dev-server`'s watcher has a `poll` option that should mitigate the issue if it is recurring. My team often has the issue repeatedly crop up. Still not sure what's causing it. – Ben Mosher Aug 19 '15 at 17:03
From the folder I noticed the problem, I just started `touch`ing files until I found one that worked. Then I knew it was the folder below that one. `mv`ing it and then `mv`ing it back worked. THANK YOU. – Alex K Dec 18 '15 at 02:25
Note: my team has mostly updated to El Capitan, and we haven't seen this same behavior since. (fixed, maybe?) – Ben Mosher Dec 22 '15 at 15:46
I noticed this behavior possibly after unchecking "Allow Spotlight Suggestions in Look up" in Spotlight settings on MacOS Sierra. Renaming my Sites folder to something else, then back to Sites worked for me as well. – Dan Tello Jan 11 '17 at 15:55
1

There is a [current issue with webpack 3 and the ModuleConcatenationPlugin](https://github.com/webpack/webpack-dev-server/issues/968) that prevents watching for file changes. Omitting it seems to allow it to work. – kross Jul 03 '17 at 19:52

score 91 · Answer 2 · answered Nov 05 '15 at 06:07

91

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

answered Nov 05 '15 at 06:07

cdvel

1,334
10
10

`sudo sysctl -p` does not work on Mavericks. Any new ideas? – Simon H Mar 03 '16 at 06:46
[There is a current problem with Webpack 3 and `ModuleConcatenationPlugin`](https://github.com/webpack/webpack-dev-server/issues/968). Omitting `ModuleConcatenationPlugin` allows watching to continue. – kross Jul 03 '17 at 19:47
@SimonH tried looking at and changing `/etc/sysctl.conf` directly? Changing resp. settting that key-value? (If you can't find the command to apply ad-hoc (`sysctl -p`), well then it's a single reboot, and you should be good...) – Frank N Sep 14 '17 at 08:57
6

I recommend checking the number of watches before, to ensure that it hasn't been increased (giving you an idea, if this _could_ ge the problem): i.e. `sudo sysctl -a | grep max_user_watches` – Frank N Sep 14 '17 at 08:58
This solved my problem when running chroot (Ubuntu) on a Chromebook – Phil D. Jun 14 '18 at 00:16
Worked for me(CentOs 7). Thanks – mrbf Jul 01 '18 at 04:13
This was the problem after upgrading to Ubuntu 18.04 LTS, This has solved my problem.. Kudos – Nijesh Hirpara Aug 17 '18 at 02:18
Also worked for me on Ubuntu 18.04.4 LTS (4.15.0-91-generic) – forgetso Apr 07 '20 at 09:16
Also, worked for ubuntu 20.04 `kernel: 5.8.0-7630-generic #32~1605108853~20.04~8bcf10e-Ubuntu` – jmunsch Nov 25 '20 at 17:23
Link is dead. For current version docs look here: https://webpack.js.org/configuration/watch/#troubleshooting – Anders Kjeldsen Dec 14 '21 at 13:31

CoderBriggs · Answer 3 · 2020-10-27T21:14:14.077

54

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/
}

edited Oct 27 '20 at 21:14

answered Aug 12 '17 at 21:31

CoderBriggs

667
5
9

3

@Lokesh webpack can watch files and recompile whenever they change. Watch mode is turned off by default so `watch: true` might work as well. Polling is the continuous checking of other programs or devices by one program or device to see what state they are in, usually to see whether they are still connected or want to communicate. So setting `poll: true` allows webpack to check the state of your program to see if any changes have been made, or at least that what I assume is happening. – CoderBriggs Dec 29 '17 at 19:23
Linking the docs: The `poll` option is defined by [watchpack](https://github.com/webpack/watchpack) – Matthias Sep 05 '18 at 17:23
after renaming and rebooting, this did the trick for me (osx). kudos! – Elad Katz Dec 20 '19 at 17:15
It works also for MacOS Monterey and Vagrant with Ubuntu 20.04 LTS. Thanks. – Ariel Bogdziewicz Nov 02 '21 at 03:10
The answer contains a regex /node_modules/ which is [supported](https://webpack.js.org/configuration/watch/). Alternatively a glob pattern or array of glob patterns may be used e.g. "**/node_modules". Mind the quotes. – marvin_x May 01 '23 at 08:40

Chris · Answer 4 · 2018-04-23T17:37:35.503

31

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

edited Apr 23 '18 at 17:37

answered Nov 17 '16 at 21:52

Chris

2,766
1
29
34

1

Thanks! It was really not obvious that the problem was in the PhpStorm! – Sergiy Zaharchenko Jun 08 '19 at 19:45

score 18 · Answer 5 · edited Oct 04 '19 at 12:28

18

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.

edited Oct 04 '19 at 12:28

Liam

27,717
28
128
190

answered Mar 24 '16 at 15:34

Acker Apple

233
2
2

This shouldn't be downvoted, it worked for me. It took me a while to realize the problem because my app was still running correctly, but the live-reload is particular about case-sensitivity. – skwidbreth Dec 19 '17 at 15:33
If you're migrating your project from Windows to Mac that might be a real problem. Thanks! – Eugene Kulabuhov Apr 10 '19 at 10:02
Same problem here. It seems that importing files isn't sensitive to case, however watching will fail if the pathname is exactly the same as the file system – Isaac Jun 19 '20 at 01:43
Almost same here. I created file with lowercase, then renamed to uppercase - which caused some confusion in fs. Modifying file name (adding a letter in name) has resolved the issue. – Lantanios Oct 13 '22 at 19:03

score 16 · Answer 6 · answered Jan 29 '16 at 03:58

16

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)

answered Jan 29 '16 at 03:58

Les

2,316
16
17

This worked for me as well—I wish this answer had been closer to the top. OS X for me as well (El Capitan). – natchiketa Feb 04 '16 at 23:11
This fixed my issue as well. Thanks for that! – Federico Jun 17 '16 at 05:17
2

Do you know why is happening this? @Les – Ekaitz Hernandez Troyas Nov 24 '16 at 16:39

score 12 · Answer 7 · answered Mar 08 '15 at 03:54

12

One issue is that if your path names aren't absolute then things like this will happen. I had accidentally set resolve.root to ./ instead of __dirname and this caused me to waste a lot of time deleting and re-creating files like the guys above me.

answered Mar 08 '15 at 03:54

Liam Horne

857
1
7
15

score 11 · Answer 8 · answered Apr 05 '16 at 23:34

11

If changing fs.inotify.max_user_watches as pointend out by César still doesn't work try to use polling instead of native watchers by creating your script as shown in the docs or running webpack with --watch --watch-poll options.

answered Apr 05 '16 at 23:34

Angelo Selvini

113
1
5

score 11 · Answer 9 · answered Feb 07 '17 at 19:44

11

Note that if you run webpack within a virtual machine (Vagrant / Virtualbox) and you change your files on the host platform, file updates in the shared folder may not trigger inotify on Ubuntu. That will cause the changes to not be picked up by webpack.

see: Virtualbox ticket #10660

In my case, editing and saving the file on de guest (in vi) did trigger webpack. Editing it on the host (in PhpStorm, Notepad or any other application) dit NOT trigger webpack whatever I did.

I solved it by using vagrant-fsnotify.

answered Feb 07 '17 at 19:44

mk8374876

111
1
3

2

Although I use `vagrant-notify-forwarder` for more magic reload – Manh Tai Sep 04 '17 at 03:21
`vagrant plugin install vagrant-notify-forwarder` made a permanent solution for me – 4givN Apr 14 '20 at 00:19

score 9 · Answer 10 · answered Nov 03 '14 at 05:40

9

Updates: deleting the entire directory and git cloning afresh from repo fixes my problem.

answered Nov 03 '14 at 05:40

alcedo

1,632
2
12
14

4

But there must be a reason for this – Moe Elsharif Feb 27 '18 at 14:05
This solution worked well also for me. Looks like some resource blocking. First reload was completed in console output, but bundle.js was not updated. On second reload it got stuck on "Checking started in a separate process...". – Erik Parso Jul 23 '20 at 10:04

score 9 · Answer 11 · answered Mar 15 '18 at 01:07

9

Work for me in Laravel Homestead

--watch --watch-poll

answered Mar 15 '18 at 01:07

Alberto Oliveira

139
1
3

This worked for me (in a nonstandard filesystem) in Ubuntu – B T Oct 22 '19 at 22:12

score 8 · Answer 12 · answered Dec 04 '17 at 00:29

8

I was having the same issue on a .vue file. When the server restarted all worked fine, but on the next save it didn't recompiled anymore. The issue was on the import file path that had one letter capitalized. It's very hard to figure this issue because everything works on a server reboot. Check the case of your paths.

answered Dec 04 '17 at 00:29

Paulo Bruckmann

331
4
7

Thank god finally I found out. I have this exact same issue (changed a capitalized letter in file name) – hythloday Dec 02 '20 at 13:26
After trying each of these answers one by one, I finally got down to this one and found one letter that should've been uppercase. Changed it and it worked! – increda_jaw Apr 07 '21 at 20:34
I had `.Vue` instead of `.vue`... Wish I could 10x upvote this – Joey Carlisle Apr 25 '22 at 20:58
Had issue symptoms as what you're describing. I copied the content of the .vue file, then deleted the file, and then created a new file with the same name, and pasted all the content back in, and saved it, and it fixed it. – AdamT Jul 26 '22 at 11:02

score 7 · Answer 13 · answered Feb 23 '16 at 17:13

If you are using Vim you should try setting backupcopy to yes rather than the default auto. Otherwise Vim will sometimes rename the original file and create a new one, which will mess up with webpack watch:

https://github.com/webpack/webpack/issues/781

Just add this to your vim settings if this is the case:

set backupcopy=yes

score 6 · Answer 14 · answered Feb 06 '18 at 23:59

6

It wasn't recompiling for me but then I realized / remembered that webpack watches the dependency graph and not just a folder (or files). Sure enough the files I was changing weren't part of that graph yet.

answered Feb 06 '18 at 23:59

Mike Cheel

12,626
10
72
101

score 4 · Answer 15 · answered Jun 13 '17 at 09:48

4

I had similar issue, neither webpack or rollup in watch mode ware catching the changes I made. I found out that it was basically my fault as I was changing module (.tsx file) which wasn't yet imported anywhere in the application (for example App.ts which is entry point) and I was expecting build tools to report errors I made there.

answered Jun 13 '17 at 09:48

itumb

335
2
11

1

I start to use that file by importing it where it was intended to be used. – itumb Dec 16 '18 at 11:45
Nice pointing out! oh gosh like seriously how can I forget this. I need to login just to comment here to say thank you :) – Lucky Lam Jun 07 '20 at 08:29

score 4 · Answer 16 · answered Aug 21 '18 at 13:29

For me, creating folders and files in VS Code was the issue. To fix, I re-cloned my repo and this time, created new folders and files through the command line instead of Code. I think Code was corrupting the files for some reason. I saw the application just updated so maybe it's a new bug.

score 4 · Answer 17 · answered Feb 06 '19 at 21:28

Also had this issue inside a VirtualBox (5.2.18) Ubuntu (18.04) VM using Vagrant (2.1.15) with rsync synchronization. Suddenly, first build runs great but Webpack does not take the changes into consideration afterwards, even with fs.inotify.max_user_watches=524288 set. Adding poll: true in Webpack config didn't help either.

Only vagrant-notify-forwarder worked (vagrant-fsnotify didn't, for some reason), but then the rebuild happened too quickly after saving the file on the host and I suppose that rsync didn't have enough time to finish its task (maybe due to the amount of synced directories inside my Vagrantfile?).

Finally I made the watch work again by also increasing the aggregateTimeout in my Webpack config:

module.exports = {
  watch: true,
  watchOptions: {
    aggregateTimeout: 10000
  },
  ...
}

If this solution works for you, try lowering this value again, otherwise you'll have to wait 10 seconds until the build restarts each time you hit save. The default value is 300 ms.

score 3 · Answer 18 · answered Aug 23 '17 at 17:08

3

The way I resolved the issue was finding a capitalization error in an import path. Folder on file system had lower case first letter, import path was upper case. Everything compiled fine, so this was just a webpack watch include issue.

answered Aug 23 '17 at 17:08

AotearoaCoder

31
2

score 2 · Answer 19 · answered Apr 15 '17 at 12:57

I have the same issue. And I notice it's not compiling because my folder contains some character(*). And using the old watcher plugin seems to resolve the issue. Add this line to your webpack config file.

plugins: [
    new webpack.OldWatchingPlugin()
  ]

Alban Kaperi · Answer 20 · 2020-04-02T20:37:16.277

What was the cause in my case:

It seems that the value of: max_user_watches in the /proc/sys/fs/inotify/max_user_watches is affecting webpack

To check your actual value

$cat /proc/sys/fs/inotify/max_user_watches
16384

16384 was in my case and it still wasnt enough.

I tried different type of solutions like:

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

But it seems that even if I changed the value, when I restarted my PC it would go back to default one 16384.

SOLUTION if you have Linux OS(my case, I have Manjaro):

Create the file:

sudo nano /etc/sysctl.d/90-override.conf

And populate it with:

fs.inotify.max_user_watches=200000

It seems 200000 is enough for me.

After you create the file and add the value, just restart the PC and you should be ok.

score 1 · Answer 21 · answered Oct 02 '16 at 22:51

1

An easy solution on MacOS is the following :

Open two terminal windows in the same directory that your project resides.

In the first terminal window run : webpack --watch

In the second terminal windows run : webpack-dev-server

I have tried many possible solutions and this seems to be the most reliable

answered Oct 02 '16 at 22:51

skiabox

3,449
12
63
95

PS: I am using Mac OS Sierra. – skiabox Oct 03 '16 at 13:53
These are two completely different solutions for the same problem and you probably shouldn't run them in parallel. `webpack --watch` compiles the project and saves the files to disk, equivalent to running `webpack` after every save. `webpack-dev-server` is a development tool which compiles to memory and serves the content as a service over http. In any case your suggestion is not a solution, since the compiled files will not be written to the disk as long as `webpack --watch` doesn't work as advertised.. – ViggoV Oct 15 '18 at 13:38

score 1 · Answer 22 · answered Dec 24 '16 at 15:36

1

Possible solution: changing context to the app directory.

I had all my webpack config files in a sub folder:

components/
webpack/
 development.js
app.js

In webpack/development.js, set context: path.join(__dirname, '../') solved my problem.

answered Dec 24 '16 at 15:36

wwayne

145
1
11

score 1 · Answer 23 · answered Jan 03 '17 at 22:34

After trying a handful of strategies for fixing this problem I ended up just giving up but then while solving another issue I tried again and all of sudden the --watch flag was finally working.

To be honest I do not know what specifically made it work but after performing the following steps it just started working:

1. Install most recent gcc version
$ sudo port install gcc48
$ sudo port select --set gcc mp-gcc48

2. Install most recent clang version
$ sudo port install clang-3.6
$ sudo port select --set clang mp-clang-3.6

3. Export variables holding the patch to C and C++ compiler
$ export CC=/opt/local/bin/clang
$ export CXX=/opt/local/bin/clang++

It might have happened that while installing these packages some dependency just added the missing piece of the puzzle, who knows ...

Hope this help anyone struggling out there to make it working.

score 1 · Answer 24 · answered Feb 27 '18 at 14:09

1

For me deleting node_modules and doing npm install or yarn again to install all the packages solved the problem

answered Feb 27 '18 at 14:09

Moe Elsharif

358
2
10

score 1 · Answer 25 · answered Mar 13 '19 at 03:12

If this happened suddenly in your project, then this could fix the issue.

Maybe somehow the files which were tracking your project changes which webpack looks for got corrupted. You can create them again just by following simple steps.

come out of your project dir. ($: cd ..)
move your project to different directory ($: mv {projectName} {newName})
go into the new dir ($: cd {newName})
start the server and check if it reloads on every file change (it should work in most cases, because now webpack creates new files to watch for changes)
come out of the dir ($: cd ..)
move it back to its original name ($: mv {newName} {projectNam}) This worked for me............

score 0 · Answer 26 · answered Mar 26 '17 at 15:28

I am adding another answer because I believe that this is the best solution so far. I am using it every day and it rocks! Just install this library :

https://github.com/gajus/write-file-webpack-plugin

Description : Forces webpack-dev-server program to write bundle files to the file system.

How to install :

npm install write-file-webpack-plugin --save-dev

score 0 · Answer 27 · answered Aug 28 '18 at 20:26

0

Try changing --watch to -d --watch

worked for me

answered Aug 28 '18 at 20:26

Adrin

585
3
11

what does -d do ? – strix25 Sep 06 '22 at 11:36

score 0 · Answer 28 · answered Mar 14 '19 at 04:55

I came across this question when I was having a similar issue-- it appeared that webpack was not rebundling, even when running webpack --config.

I even deleted bundle.js and the webpage was still displaying as before my edits.

For those of you who get this same problem, I finally did the 'empty cache and hard reload' option in chrome (right click the reload button with the devtools open) and that did that trick

Mahdiyeh · Answer 29 · 2019-11-08T11:46:51.497

0

I met the same issue, tried many things, finally Chrome Clear Browsing Data on Mac worked for me.

These modules have been installed:

"browser-sync": "^2.26.7",

"browser-sync-webpack-plugin": "^2.2.2",

"webpack": "^4.41.2",

"webpack-cli": "^3.3.9"

edited Nov 08 '19 at 11:46

answered Nov 08 '19 at 11:40

Mahdiyeh

865
11
12

score 0 · Answer 30 · answered Jul 24 '20 at 11:21

Problem was in distiction between .js and .ts files. Why ?

On project build, Visual Studio compiles typescript files into .js and .js.map. This is totally unecessary, because webpack handles typescript files as well (with awesome-typescript-loader). When editing componet .tsx files in Visual Studio Code or With disabled compileOnSave option in tsconfig.json, edited ts file is not recompiled and my webpack was processing unactual .js file.

Solution was to disable compiling typescript files in visual studio on project build. Add

<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

in PropertyGroup of your .csproj.

score -1 · Answer 31 · answered Aug 21 '18 at 13:59

-1

The thing is: webpack loads script from some weird url: webpack:/// which is cached. You should add version at the end of your script to prevent caching: main-compiled.js?v=<?php echo time()?>"

answered Aug 21 '18 at 13:59

Julia

95
1
7

webpack --watch isn't compiling changed files

31 Answers31

What was the cause in my case:

SOLUTION if you have Linux OS(my case, I have Manjaro):

Linked