SquishIt ForceRelease in MVC3 Doesn't Properly Minify JQuery Plugins

Question

I am getting a ton of errors when using SquishIt in my MVC3 application with 3rd party JQuery plugins. On my development machine, if I set the ForceDebug method on the Bundle command, everything works fine and the JS is processed as normal. However, if I set the ForceRelease method (to test before rolling out to production), when I bring the site up, FireFox displays "is not a function" errors. I have tried setting compilation debug="true" in the web.config with no improvement.

Here are the JS calls in my _layout.cshtml file. All bundling is for standard JQuery plugins:

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.8.18.custom.min.js")"></script>
@(Bundle.JavaScript()
    .Add("~/Scripts/modernizr-2.5.3.js")
    .Add("~/Scripts/jquery.fileinput.js")
    .Add("~/Scripts/jquery.numeric.js")
    .Add("~/Scripts/jquery.maskedinput-1.3.min.js")
    .Add("~/Scripts/jquery.maxlength_countdown.js")
    .Add("~/Scripts/jquery.qtip.min.js")
    .Add("~/Scripts/jquery.pnotify-1.1.0.min.js")
    .Add("~/Scripts/fileuploader.js")
    .Add("~/Scripts/jquery.dropdownchecklist-1.4.js")
    .Add("~/Scripts/jquery.blockUI.js")
    .Add("~/Scripts/jquery.textarearesizer.min.js")
    .ForceRelease()
    .MvcRender("~/CompiledContent/combined_#.js")
  )

Here is a sample of errors that FireFox displays. This changes based on what I've included in the bundle:

function (n) {var i = (n.browser.msie ? "paste" : "input") + ".mask", t = window.orientation != undefined;n.mask = {definitions: {9: "[0-9]", a: "[A-Za-z]", '*': "[A-Za-z0-9]"}, dataName: "rawMaskFn"}, n.fn.extend({caret: function (n, t) {if (this.length != 0) {if (typeof n == "number") {return t = typeof t == "number" ? t : n, this.each(function () ... YADDA YADDA YADDA - Another 50 lines of script here ... function () {setTimeout(i, 0);})();}).bind("blur.mask", function () {v(), c.val() != p && c.change();}).bind("keydown.mask", nt).bind("keypress.mask", d).bind(i, function () {setTimeout(function () {c.caret(v(true));}, 0);}), v();});}});}(jQuery) is not a function

$(".dropdown-checklist").dropdownchecklist is not a function

Any thoughts on what I might have screwed up here?

Answer 1

We ran into something like this before...found out that one of the files did not have a semicolon at the end of the javascript function. This caused all kind of havoc. The function works fine when it is a file by itself, but once it is combined the semicolon makes a difference.

You can also set the Minifier to be a null minifier and view the output it creates. This may help with some more troubleshooting.