JavaScript Error in Asp.Net MVC 4 Bundling

Question

When I use the below Bundling in MVC 4, my App gets several JavaScript errors,such as 'jQuery undefined'

        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js",
                    "~/Scripts/jquery-ui-{version}.js",
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate*"));

But when I use the below approach, my App works without JavaScript errors:

        bundles.Add(new ScriptBundle("~/bundles/jquery1").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jquery2").Include(
                    "~/Scripts/jquery-ui-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jquery3").Include(
                    "~/Scripts/jquery.unobtrusive*"));

        bundles.Add(new ScriptBundle("~/bundles/jquery3").Include(
                    "~/Scripts/jquery.validate*"));

My Question: what is the problem?

Answer 1

This is caused by your scripts being included in the wrong order. You should ensure that your version of the Web Optimization Framework is up-to-date. This answer provides further details:

https://stackoverflow.com/a/11995916/1043198

And the NuGet package:

http://nuget.org/packages/Microsoft.AspNet.Web.Optimization