browserify: concatenated browserified files => error _prelude.js vs. loading separate files work

Question

Running into a problem when concatenating two browserified files (vendor.js and app.js into combined.js)

Loading combined.js in the browser throws the following in _prelude.js :

Uncaught Error: Cannot find module 'function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}'

while loading the browserified files individually works just fine.

What am I missing?
(let me know if you need more config, happy to provide)

Thanks for your help!

In Gruntfile.js:

browserify: {
        vendor: {
            src: ['client/requires/**/*.js'],
            dest: 'build/vendor.js',
            options: {
                shim: {
                    jquery: {
                        path: 'client/requires/jquery/js/jquery.js',
                        exports: '$'
                    },
                    underscore: {
                        path: 'client/requires/underscore/js/underscore.js',
                        exports: '_'
                    },
                    backbone: {
                        path: 'client/requires/backbone/js/backbone.js',
                        exports: 'Backbone',
                        depends: {
                            underscore: 'underscore'
                        }
                    },
                    'backbone.marionette': {
                        path: 'client/requires/backbone.marionette/js/backbone.marionette.js',
                        exports: 'Marionette',
                        depends: {
                            jquery: '$',
                            backbone: 'Backbone',
                            underscore: '_'
                        }
                    },
                    eventsource: {
                        path: 'client/requires/eventsource/eventsource.js',
                        exports: 'EventSource'
                    },
                    moment: {
                        path: 'client/requires/moment/moment.js',
                        exports: 'moment'
                    },
                    bootstrap: {
                        path: 'client/requires/bootstrap/js/bootstrap.js',
                        exports: null
                    }
                }
            }
        },
        app: {
            files: {
                'build/app.js': ['client/src/main.js']
            },
            options: {
                transform: ['node-underscorify'],
                debug: true,
                external: ['jquery', 'underscore', 'backbone', 'backbone.marionette', 'eventsource', 'moment', 'bootstrap']
            }
        },
    },

    concat: {
        'build/<%= pkg.name %>.js': ['build/vendor.js', 'build/app.js']
    },

Answer 1

I have done some initial investigation and there appears to be a definite problem with the preamble. I've raised an issue with the grunt-browserify maintainers so lets see what comes of that.

For now I am concatenating a file between vendor.js and app.js as a way to fix the preamble as follows:

Gruntfile.js

concat: {
        'build/<%= pkg.name %>.js': ['build/vendor.js', 'client/src/fix_browserify', 'build/app.js']
    },

fix_browserify

require=

Note there is no carriage return or linefeed in the above file

I am unsure if there will be any unintended consequences of defining require twice but it appears to be working in my limited use. If you have more than just one app bundle then you would similarly need to interleave concatenation of the fix_browserify file before each of the bundles.

If I become aware of any better solutions I'll update this answer.

UPDATE

I ended up ditching grunt/browserify after looking at how browerify worked and just went with brunch which was far easier to setup and also does much faster rebuilds when things change. Whilst not a grunt replacement it builds everything I need.

Answer 2

Quick solution

We fixed this error by ensuring that the JS bundle in each file ended with a semi-colon, like Keven Wang mentioned, before being concatenated.

More information

It seems like as of writing, Browserify omits the semi-colon (possibly due to this issue) if you have enabled generating source maps (controlled by debug option). If we don't provide this option, Browserify adds the semi-colon and there are no errors after concatenating.

There seem to be issues caused by whatever the default behaviour is—omitting or appending the semi-colon (see this issue—sometimes you want to wrap the output in an expression, so don't want the semi-colon). It depends heavily on your build pipeline too, as we had no errors in another project with a slightly different build process that was running the output through Grunt's uglify task, stripping the source maps, and adding the semi-colon at the end.

I think Andrew's solution of adding a spacer file is unnecessarily hacky, and there are better solutions available to ensure the output is as you expect (i.e. with semi-colons at the end) before concatenating the bundles.