node options flag not recognized using gulp and browserify

[stevus]

Browserify shims the core http module with stream-http for browser compatibility, and has a --node flag to prevent this from happening. However, I am unable to do this through gulp, or the documentation does not explain how. I would like to perform the following and not have the stream-http module included in my final browserify bundle:

gulp.task('scripts:server', () => {

    const bundler = browserify(
        'build/source/server.js',
        { 
            debug: true,
            node: true,
        }
    );

    const bundlerError = (err) => {
        console.error(err);
    };

    return bundler.bundle()
        .on('error', bundlerError)
        .pipe(source('server.js'))
        .pipe(buffer())
        .pipe(gulp.dest('dist'));
});

I can see the bare: true and browserField: false do something if I pass them into browserify as options, however, node: true seems to have no effect.

If I run browserify as a command and not through gulp, it works just fine:

browserify --node build/source/server.js -o dist/server.js

[MellowMelon]

I believe node and bare are command-line only aliases, and bare: true will not do anything in the API.

bare sets builtins: false, commondir: false, and insertGlobalVars so that only __dirname and __filename are used in insert-module-globals. node sets browserField: false in addition to these.

In this case, I think you are just interested in builtins:

const bundler = browserify(
    'build/source/server.js',
    { 
        debug: true,
        builtins: false,
    }
);

[stevus]

i will give that a try.

[stevus]

So, tried that. But now seeing the below error:

module.js:338
    throw err;
          ^
Error: Cannot find module '_process'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:278:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at s (/vagrant/development/app/dist/server.js:1:176)
    at /vagrant/development/app/dist/server.js:1:367
    at Object../Configuration (/vagrant/development/app/dist/server.js:4930:14)
    at s (/vagrant/development/app/dist/server.js:1:316)
    at e (/vagrant/development/app/dist/server.js:1:487)
    at Object.<anonymous> (/vagrant/development/app/dist/server.js:1:505)

Here is my gulp task:

import browserify from 'browserify';
import buffer from 'vinyl-buffer';
import gulp from 'gulp';
import source from 'vinyl-source-stream';

gulp.task('scripts:server', () => {

    const bundler = browserify(
        'build/source/server.js',
        {
            builtins: false,
            debug: true,
        }
    );

    const bundlerError = (err) => {
        console.error(err);
    };

    return bundler.bundle()
        .on('error', bundlerError)
        .pipe(source('server.js'))
        .pipe(buffer())
        .pipe(gulp.dest('dist'));
});

Here is the offending code snippet (wrapped offending line with >>>> <<<<):

...

// Catch 404
app.use(function (req, res) {
    log.info(req.originalUrl);
    var err = new Error('404 - Not Found');
    err.status = 404;
    log.info(err);

    res.status(404);
    res.render('404', {
        title: 'MovieSeriesRankings.com - Page Not Found'
    });
});

app.listen(config.nodePort);
>>> }).call(this,require('_process'),"/build/source") <<<<

},{"./Configuration":23,"./router":28,"_process":undefined,"babel-polyfill":31,"body-parser":33,"bunyan":84,"express":273,"path":undefined,"serve-favicon":567}],30:[function(require,module,exports){
'use strict';

Object.defineProperty(exports, '__esModule', {
    value: true
});

...

No idea what _process is.

[MellowMelon]

That would be browserify's attempt to resolve the process variable, which you presumably are using in that file. Doing builtins: false prevents it from being able to fill that in.

If http is the only builtin you don't want Browserify to insert, you can just exclude it directly:

const bundler = browserify(
    'build/source/server.js',
    { 
        debug: true,
    }
).exclude("http");

builtins: false is essentially just a shorthand to make a bunch of exclude calls like this one.

[stevus]

Yep - that did it. Thanks a lot.

So - for the historical record, this solutions seems like a workaround for what I am able to accomplish with the CLI command:

browserify --node build/source/server.js -o dist/server.js

However, following the above steps have provided the same results, so for the time being it doesn't feel like like the node-browserify API should be updated to support the node option.

[tlopo]

Through the api the parameters necessary to replicate --node are:

        {
            browserField : false,
            builtins : false,
            commondir : false,
            insertGlobalVars : {
                process: undefined,
                global: undefined,
                'Buffer.isBuffer': undefined,
                Buffer: undefined 
            }
        }

That's how my gulp task looks like:

    gulp.task('default', function() {
        return browserify('./index.js',
        {
            browserField : false,
            builtins : false,
            commondir : false,
            insertGlobalVars : {
                process: undefined,
                global: undefined,
                'Buffer.isBuffer': undefined,
                Buffer: undefined 
            }
        }
    )
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('./'));
    });

Hope this helps someone.

[stevus]

@tlopo I'll give this a try

[EvanCarroll]

This issue should not be closed, the node:true flag still doesn't work through the constructor. The whole arguments piece is a mess and should be cleaned up.

[stevus]

Reopening this issue since it sounds like @EvanCarroll knows of a solution.

[EvanCarroll]

@stevus all of the issues on #1570 are essentially the same, they arise from a confusion and dissonance between the CLI Options, and the Browserify(file,Options) In this case, node:true would set

insertGlobalVars : {
                process: undefined,
}

(and all other node builtins), which is ultimately the line that solves the problem with _process

Error: Cannot find module '_process'

Subscribe to that issue if you want to see this resolved. I'm only writing the code if someone with commit access gives me the thumbs up. There are too many uncommited patches in this project as is.

[noahehall]

+1

@tlopo
I was able to use detectGlobals: false,
instead of the insertGlobalVars key

[tanguy2m]

I faced the same issue using browserify to bundle my javascript modules in an Electron app.
I ended-up with the following options:

  ignoreMissing: true,
  builtins: false,
  commondir: false,
  browserField: false,
  detectGlobals: false

[Boscop]

@tanguy2m And did those settings fix the problem? I'm also running into this issue when using browserify and parcel :/ parcel-bundler/parcel#725

[rip3rs]

I concur with @tanguy2m thanks to him, he has saved me HOURS of debugging... Thanks mate 🗡
For Electron it works, mind you within the BrowserWindow preferences nodeIntegration NEEDS to be true (this does create some security risks)

win = new BrowserWindow({
    width: 1024,
    height: 1024,
    webPreferences: {
      nodeIntegration: true,
      preload: path.join(__dirname, '/preload.js')
    }
  });

gulpfile.js

gulp.task('browserify', () => {
  let jsFiles = globArray.sync(['./' + config.defaultPath + config.browserify.files, config.dsJsPath]);  
  let settings = { entries: [require.resolve('babel-polyfill'), jsFiles] };

  if(config.defaultPath === 'electron') {
    Object.assign(settings, {
      ignoreMissing: true,
      builtins: false,
      commondir: false,
      browserField: false,
      detectGlobals: false
    });
  }

  let b = browserify(settings);

I know this is not specific for electron question, but considering I found my solution here I felt like it was a nice decision in case someone needed to find a solution.