Bundle Loading Scripts in wrong order

Question

I am getting a jQuery is not defined error from jQuery validate being loaded before jquery.

I am not sure if this is involved with using ASP.net Boilerplate or not, though in the bundle config I have the following:

 bundles.Add(
            new ScriptBundle("~/Bundles/vendor/js/bottom")
                .Include(
                    "~/lib/json2/json2.js",
                    "~/lib/jquery/dist/jquery.min.js",
                    "~/lib/bootstrap/dist/js/bootstrap.min.js",
                    "~/lib/moment/min/moment-with-locales.min.js",
                    "~/lib/jquery-validation/dist/jquery.validate.min.js",
                    "~/lib/blockUI/jquery.blockUI.js",
                    "~/lib/toastr/toastr.min.js",
                    "~/lib/sweetalert/dist/sweetalert.min.js",
                    "~/lib/spin.js/spin.min.js",
                    "~/lib/spin.js/jquery.spin.js",
                    "~/lib/bootstrap-select/dist/js/bootstrap-select.min.js",
                    "~/lib/jquery-slimscroll/jquery.slimscroll.min.js",
                    "~/lib/Waves/dist/waves.min.js",
                    "~/lib/push.js/push.min.js",
                    "~/Abp/Framework/scripts/abp.js",
                    "~/Abp/Framework/scripts/libs/abp.jquery.js",
                    "~/Abp/Framework/scripts/libs/abp.toastr.js",
                    "~/Abp/Framework/scripts/libs/abp.blockUI.js",
                    "~/Abp/Framework/scripts/libs/abp.spin.js",
                    "~/Abp/Framework/scripts/libs/abp.sweet-alert.js",
                    "~/lib/flatpickr/dist/flatpickr.min.js",
                    "~/js/admin.js",
                    "~/js/main.js",
                    "~/Scripts/jquery.signalR-2.2.3.js",
                    "~/Views/Shared/_Layout.js"
                )
            );

So I am using the minified version of jQuery and the minified version of jQuery.Validate. As soon as I use the minified version of jQuery and I load a page, jquery.validate.min.js is the first script that gets loaded in and as expected it throws a jQuery is not defined. error. Though as soon as I do not use the minified version of jQuery (jquery.js) the scripts are loaded up in the correct order.

Is ASP.NET Boilerplate using any custom file ordering in the bundles that I do not know of? I do believe that MVC, but could be wrong, that it will process explicitly named scripts first in the bundle, then symbolically named scripts. Though these are all explicitly named scripts.

Is there something I am missing or some solution on how I can solve this?

Not sure, why you get the order issue...but something else to verify - are all JS libraries updated? You can update them via the NuGet package manager and there you will see the version. Could be version mismatch and worth checking. — st_stefanov
– st_stefanov, Commented May 14, 2018 at 19:23
Use IBundleOrderer msdn.microsoft.com/en-us/library/…, this will make sure files are added in order. Also in this answer: stackoverflow.com/a/11995916/4851351 — pool pro
– pool pro, Commented May 14, 2018 at 21:17
@st_stefanov I checked the NuGet Package manager updates and the only one would be bootstrap as I have not moved to bootstrap 4 on this project. jQuery Validate and jQuery are all on the latest versions. — twigman08
– twigman08, Commented May 14, 2018 at 21:40
@poolpro Adding my own IBundleOrderer that just returned the list as is seemed to work. Though I feel like it should be necessary as wouldn't the default bundle orderer promote jQuery before jQuery validate, if I remember right? And why it was only promoting jQuery Validate before jQuery when I used the minified version of jquery. — twigman08
– twigman08, Commented May 14, 2018 at 21:57
There is no need to use the minified versions. One of the features of bundles is they automatically minify the file in production, but use the non-minified version in debug — user3559349
– user3559349, Commented May 14, 2018 at 22:28

twigman08 · Accepted Answer · 2018-05-14 22:03:12Z

1

I ended up using an answer from here: https://stackoverflow.com/a/11981271/4201348

So pretty much I defined my own BundleOrderer called AsIsBundleOrder that implementsIBundleOrderer that just returned the files as is, and set that as the orderer to use in the BundleConfig.

That works, though still doesn't give me a complete answer as to WHY (the important reason in my mind) the default orderer was only promoting jQuery validate to be before jQuery only when I used the minified version of jQuery.

answered May 14, 2018 at 22:03

twigman08

5121 gold badge5 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Bundle Loading Scripts in wrong order

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related