Watchify Stops Listening to Dependency Changes After Failed Transform

[sverrejoh]

When using watchify with for example the reactify transform, and the transform fails, watchify will only listen for changes to the main file, and not it's dependencies.

It looks like a regression of issue #3, and git bisect shows it as introduced in bcda5eb30be1183dd677d74585ed729ce2a486e4

index.js:

    require("./test.jsx");

test.jsx:

    module.export = "test";

Run with watchify:

    $ watchify  -d -v -t reactify index.js -o bundle.js

Watchify will now stop watching test.jsx if you add a syntax error in it (add "..." for example).

[RnbWd]

I've had the same problem. I'm curious if this occurs with all transforms or just reactify.

[mikekidder]

@RnbWd found your comments in thread on gulpjs/gulp/issues/369.

I have been experimenting on the greypants/gulp-starter repository which uses Browserify to bundle Backbone, Coffee, and Handlebars. Watchify is being used to update any changes. Pretty much same story. The Gulp process hangs if there are compile errors.

For now, I am using Gulp watch (reruns Browserify) to monitor folder, not using Watchify.

[sverrejoh]

I've reverted to Watchify 0.8.1, which works as expected for me.

I haven't had time to investigate properly, but for now that version does the job.

[mikekidder]

@sverrejoh Yes, confirmed. Watchify 0.8.1 works for me as well. Thanks!

[RnbWd]

Good to know!! I updated the thread on gulp/issues/369. If using gulp, transforming non-js syntax into pure-js prior to browserify/watchify bundle is probably best practice. Browserify transforms can be plugged into gulp streams with vinyl-transform. Using reactify (for jsx) is significantly faster than gulp-react. Just remember to return a callback if the transform errors or gulp won't update.

[joegoldbeck]

+1 This just cropped up for me after upgrading from 0.6.3

[MoOx]

Same issue here.

[glenjamin]

To provide a bit more context here, I've traced this down to the invalidate function.

When a dependency changes, it is removed from the watch list, and then the "file" event from bundling will re-add it. In the case of a transform failing this seems to happen before the "file" event has been emitted, which means the file with the syntax error is no longer being watched.

I'm not entirely clear why invalidate removes the watches at this point in the flow.

[GirlBossRush]

+1

[zero-is-one]

+1

[mourner]

Waiting for this too.

[ghost]

Closing since the failing testcase for transform errors passes in watchify 1.0.0.

[MoOx]

Awesome. Thanks for you work @substack !

[gregtatum]

https://github.com/andreypopp/reactify/issues/18

I opened an issue here on reactify as I'm still having this issue.

[santiagoaguiar]

I have the same issue. I have a gulp task that compiles typescript to JS using tsify plugin, and then watchifies the browserify bundle.

If the tsify module fails while compiling, the watchify aborts.

I'm not using reactify, and I had the same issue using a grunt task instead. Only way I got it working was to remove tsify and to a TS->JS compile run first, and then browserify those files, but that process also has drawbacks.

Using watchify 2.1.1& browserify 6.2.0.

[MoOx]

Having this too. The issue is back :(

[sanfilippopablo]

Same here

[GirlBossRush]

I switched to Webpack. The configuration had a bit of a learning curve but it's resulted in a much simpler preprocessor.

Here's an example for anyone interested in the switch. https://github.com/TeffenEllis/react-starter-pack

[fiatjaf]

I'm being hit by this. I'm using coffeeify. To hell with Webpack.

[snorkypie]

I've got this problem too. Anyone have a working fix or should I try digging into this?

[ByScripts]

Same problem here. Using watchify 3.3.1 with gulp and reactify.

After an error watchify no longer listen for changes.

[btakita]

I'm having the same issue with watchify 3.3.1.

[davelosert]

Same Problem with watchify 3.7.0

[fiatjaf]

A suggestion for people facing this problem is to use https://www.npmjs.com/package/browserify-incremental along with some another tool to watch file changes and do actions, for example, http://entrproject.org/. then instead of calling watchify you would call something like ls | entr bash -c 'browserifyinc app.js -o dist/bundle.js'.

[bertho-zero]

Stackoverflow: Gulp with watchify/browserify runs twice then stops watching

Just came across this issue. After browsing the web for answers for a couple hours I tried editing the file in Notepad instead of PHPStorm IDE. It turned out that browserify/watchify continued to work via notepad.

Thats when I tried to play around with some settings. It turned out PHPStorm / System Settings / Use "safe write", if enabled, stops watchify after PHPStorm edits the file.

All the problems magically disappeared when i turned "safe write" off. I am not sure what IDE you are using, but maybe there is a "Safe Write" option too.