Known errors when using Browserify?

[Carl Erik Kopseng]

I am currently refactoring the javascript portions of a web site, and now I have bundled some scripts together using Browserify. The resulting script is bundled along with other resources using SquishIt. In Debug mode, when SquishIt is not bundling all the scripts together everything seems to work just fine, but when running in Production, and SquishIt bundles everything together I get errors from the Browserify part of my bundle. The error is complaining that `r` has no length property (see line 18) below. This part of the code is created by Browserify when bundling the scripts.

(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);
                var f = new Error("Cannot find module '" + o + "'");
                throw f.code = "MODULE_NOT_FOUND", f
            }
            var l = n[o] = {
                exports: {}
            };
            t[o][0].call(l.exports, function(e) {
                var n = t[o][1][e];
                return s(n ? n : e)
            }, l, l.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
})({

I really can't think of anything that using SquishIt to bundle all the scripts would break the logic of the browserified scripts. What could be the cause of this? Something with Windows being redefined, perhaps? This gist shows the entire source code, in case that is relevant.

I have not changed anything on the ASP.NET side (in the bundling), and the relevant part of my ´Head.ascx´ looks like this:

     Bundle.JavaScript()
     .Add(Assets.JavaScript.GetUrl("main.js").ToString())
     .Add(Assets.JavaScript.GetUrl("Plugins/raphael-min.js").ToString())
     .Add(Assets.JavaScript.GetUrl("Plugins/vector_map.js").ToString())
     // more ...
     .Render("~/Content/"+Assets.VersionString+"/Scripts/Combined/combined.js")

[Alex Ullrich]

I replied to your question on stackoverflow but this may be a better place to discuss.

Have a look at this comment it may help https://github.com/jetheredge/SquishIt/issues/320#issuecomment-139921409

Out of curiosity why do you need two bundling solutions in play?  I could see them stepping on each other's toes pretty easily.

[Carl-Erik Kopseng]

I found out by inspecting the minified output that SquishIt (or some minifier included with it) destroyed the closures produced by browserify; "unwrapping" them and getting the dependencies out of order. This made us turn to the built-in ASP.NET bundler which worked fine, but the minifying process done by ASP.NET produced errors shown in a comment section at the top that revealed that we included some untranspiled ES6 lambda/arrow functions. This might be the real reason why SquishIt broke down, but I haven't tried rerunning it after transpiling the browserified bundle.

As to why we use two different bundling solutions, I recently took over this legacy project, trying to clean it up and bring in modern FE practices. Using Browserify I can get rid of globals by moving one script at a time over to CommonJS while not touching everything else.

As the resulting bundle from Browserify is wrapped in a closure and does not expose any globals, I don't really see how it should cause any troubles with other bundlers, such as SquishIt. What did you have in mind?