jquery 1.9.0 and modernizr cannot be minified with the ASP.NET Web Optimization Framework

Question

We are using the ASP.NET Web Optimization Framework with bundles and minification. One bundle just contains jquery and modernizr. This all worked fine with jquery 1.8.3 but since we updated to 1.9.0 the combination jquery/modernizer bundle is not working anymore.

bundles.Add(new ScriptBundle("~/st-scripts-load-first.js")
       .Include("~/Resources/JavaScript/jquery-1.9.0.js",
                "~/Resources/JavaScript/modernizr.form-placeholder.js"));

We have both jquery-1.9.0.js and jquery-1.9.0.min.js in the directory. If there is no .min file the optimization framework will generate one automatically. It doesn't work if the .min file is there or not.
It works if compilation debug="true" and there is no minification or bundling.

/* Minification failed. Returning unminified contents.
(5,2-3): run-time warning JS1195: Expected expression: *
(11,60-61): run-time warning JS1004: Expected ';': {
(395,2-3): run-time warning JS1195: Expected expression: )
(397,21-22): run-time warning JS1004: Expected ';': {
(397,4590-4591): run-time warning JS1195: Expected expression: )
(398,28-29): run-time warning JS1195: Expected expression: )
(398,84-85): run-time warning JS1002: Syntax error: }
(402,44-45): run-time warning JS1195: Expected expression: )
(408,1-2): run-time warning JS1002: Syntax error: }
(393,5-22): run-time warning JS1018: 'return' statement outside of function: return Modernizr;
(404,5,406,16): run-time warning JS1018: 'return' statement outside of function: return !!('placeholder' in (Modernizr.input || document.createElement('input')) &&
               'placeholder' in (Modernizr.textarea || document.createElement('textarea'))
             );
 */

Answer 1

I'm sure that the cause of your problem is the last line of jquery-1.9.0.min.js:

//@ sourceMappingURL=jquery.min.map

The unminified version of jQuery 1.9 does not contain this. I'll explain why in a minute.

I've noticed myself that when jquery-1.9.0.min.js is bundled with another file - and that other file follows jquery-1.9.0.min.js - then the following JS file is, in a manner of speaking, corrupted.

The reason is that the start of the following file is appended to the "//@" line of jQuery, which means that it then becomes one long, extended comment. In your case this meant that the

window.Modernizr=function(n,t,i){function...

script at the start of Modernizr was outputed from the bundling process as a comment like so:

//@ sourceMappingURL=jquery.min.map window.Modernizr=function(n,t,i){function...

There's a discussion on jQuery's Bug Tracker regarding this.

Your options are either to remove that last line or to wrap it in multi-line comment symbols:

/*
//@ sourceMappingURL=jquery.min.map
*/

Also, you can see that Modernizr also contains a source map at the end of its minified version. And with good reason.

The rationale behind it is to help you in debugging a problem when the minified version of the code has been used. This line tells the browser that this minified file maps to another file which can aid in debugging. To take advantage of this you need to have that referenced file (jquery.min.map) on the server or downloaded to the client. Plus, I believe that Chrome is the only browser currently supporting this; it's still under development at Firefox.

This page has an excellent explanation of Source Maps.

So in summary, removing it shouldn't really cause you any problems unless you wish to map back to the original version of the source while debugging in the browser. In your case, because of the way that ASP.NET's Optimization Framework works, when debug="True" it will serve up the unminified versions anyway, so you probably don't have a need to use the sourceMappingURL.