.require(file) breaks with watchify

[JedWatson]

Using browserify 5.9.1 and watchify 1.0.1

I am working on a React Select component, and trying to set up a good development workflow with gulp and watchify.

I'm having major issues trying to get browserify and watchify to build multiple bundles with common dependencies, there is another issue in my repo for context (JedWatson/react-select#1) but I'll give the full background here. I think I've either found a bug or completely misunderstood how to get this working.

Both my example app and my component require react, so I am setting up:

• a common.js bundle with react and underscore exposed by it
• a select.js bundle with the Select component it it, loaded from source and exposed as react-select
• an app.js bundle with my example usage in it, using require('react-select') as you would if the package had been installed from npm.

My gulp build script looks like this:

    var common = browserify(watchify.args)
        .require('react')
        .require('underscore');

    var select = browserify(watchify.args)
        .exclude('react')
        .exclude('underscore')
        .require('./lib/select.js', { expose: 'react-select' });

    var app = browserify(watchify.args)
        .add('./examples/src/app.js')
        .exclude('react')
        .exclude('react-select')
        .transform(reactify);

I then pass these three off to a common function that bundles them, which looks like this:

function doBundle(target, name, dest) {
    return target.bundle()
        .on('error', function(e) {
            gutil.log('Browserify Error', e);
        })
        .pipe(source(name))
        .pipe(gulp.dest(dest));
}

... and that all works as expected.

I have no other scripts on my page (e.g. anything that provides a require implementation)

The errors start when I try and get the files to update with watchify. In particular, I want my select.js bundle to rebuild when I change ./lib/select.js or any file it requires.

In the watch task, before the bundle function is called, I invoke watchify like this:

function watchBundle(target, name, dest) {
    watchify(target).on('update', function() {
        doBundle(target, name, dest);
    });
}

This almost works, except when reloading the webpage that includes the bundles, after ./lib/select.js has changed, I now get an error saying Uncaught Error: Cannot find module 'react-select'

Examining the difference in the built files, the change seems to be that when the bundles are generated initially, there is a require= statement at the start of the first line. On subsequent builds (as triggered by watchify), the require= statement is missing.

If I edit the generated bundle, adding require= to the start of the first line, and reload the page, everything works as expected.

This makes me suspect that either I am doing something wrong, or there's a bug where watchify somehow causes browserify to forget to add the require= statement at the start.

If anyone can help, I'd really appreciate it!

[JedWatson]

I found the underlying issue, which is that the status of this._bpack.hasExports is lost during reset, and submitted #892 to fix it.

In the meantime, a workaround to the issue is providing { hasExports: true } as opts to Browserify.

[ghost]

fixed in 5.11.1