JavaScript Bundling Issues When Using Unfinished Closures

We all know it’s a good idea to bundle JavaScript files into as few script includes as possible to minimize HTTP request.

And – we all know you should write your code inside closures, to avoid the biggest problem of JavaScript: its dependence on global variables!

But what happens when those two things don’t work together?

For me, they didn’t play nice with each other today. Whenever I bundled my JavaScript files i got an Uncaught TypeError: undefined is not a function.

Consider this code:

/* a-file.js / !function($) { // Code here }(window.jQuery) / another-file.js */ (function ($) { $("#hello").text("World!"); })(window.jQuery);​

The error occurred on the first line, inside the closure in another-file.js. Take a look at this jsFiddle.

Since the result of the first closure is true, the above code will evaluate as this:

/* a-file.js / true / another-file.js */ (function ($) { $("#hello").text("World!"); })(window.jQuery);​

The only thing missing, is a semicolon to finish off the first closure (updated, and working jsFiddle):

/* a-file.js / !function($) { // Code here }(window.jQuery); / another-file.js */ (function ($) {   $("#hello").text("World!");    })(window.jQuery);​

Now, this is a trivial thing to get right, if you were only dealing with your own code base. But with loads of plugins, external libraries and such – you can only pray for the best!

In my case, the script that were causing the error was Twitter Bootstrap scripts. They were all missing the semi-colon in version 2.0, the issue was submitted a month ago, and later fixed

Martin H. Normark

Product and UX Hacker. Web and iOS developer.

Subscribe to Martin Normark's Blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!