ASP.NET MVC捆绑优化导致Firefox中的jQuery错误

Question

I am currently experiencing issues with getting Firefox running with the EnableOptimization boolean set to true. For the moment, all other browsers are running perfectly under this setting, only Firefox is giving consistent jQuery issues. If I turn the EnableOptimizations off, it also runs okay there.

Basically I have two bundles in my solution. The first bundle is used as the base for the entire application, which is called in the _Layout.cshtml partial view. Files located here are jQuery 1.11.3, jQuery UI, AngularJS, etc. The second bundle is grouping the scripts for a particular view. Here is the general structure of the BundleConfig file:

public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.FileSetOrderList.Clear();
        bundles.IgnoreList.Clear();
        bundles.UseCdn = true;

        Bundle baseBundle = new Bundle("~/bundles/Base");
        baseBundle.Include("~/Scripts/jquery-1.11.3.js")

        // Includes omitted due to large number of scripts

        Bundle indexBundle = new Bundle("~/bundles/Index");
         // Includes omitted due to large number of scripts


        bundles.Add(baseBundle);
        bundles.Add(indexBundle);

#if !DEBUG
        BundleTable.EnableOptimizations = true;
#elif DEBUG
        BundleTable.EnableOptimizations = true;
#endif
    }

The bundles themselves contain 30 or more scripts together, so I cannot tell you how many errors I get, but the errors all lead to the same issue, which is something is wrong with jQuery in my solution. Some examples:

Ex.1:
TypeError: $.fn is undefined
().height("")}}function customScroll({$.fn.mCustomScrollbar&&$(".withScroll").e...

Ex.2:
TypeError: $(...).on is not a function

function toggleBuilder() {
  $('.builder-toggle').on('click', function () {
    if ($('#builder').hasClass('open')) $('#builder').removeClass('open');
    else $('#builder').addClass('open');
  });
}

$(document).ready(function () {
toggleBuilder();        
});

Most of the errors occur from a template that I bought, so I'd rather not touch these scripts directly.

This behavior seems strange to me, because jQuery is the first script that is loaded on this page, so it seems to me it's impossible for any script to use jQuery before it is loaded. It's even stranger it's just FireFox that causes this error.

Any ideas what the reason could be? Perhaps some other script is overriding jQuery? How can I easily identify this?

Update: after some research, I decided to alert the meaning of $. In Chrome and the other browsers, it returns the right code. In Firefox however, it returns this:

function (out,values,parent,xindex,xcount,xkey) {
    var c0=values, a0=Array.isArray(c0), p0=parent, n0=xcount, i0=xindex, k0, v;
    if ((v=values['prefix']) != null) out.push(v+'')
    out.push('/')
    if ((v=values['entityName']) != null) out.push(v+'')
    }

As it turns out, this is Sencha ExtJS code. Now here's my updated question: how is this possible only FireFox has this issue and how can I solve this? Recall I'd rather not touch any of these existing scripts from the template unless it's necessary.

Answer 1

It turns out that the ExtJS scripts weren't minified correctly, which is why Firefox gave those errors. Everything else was OK in my solution.