ASP.NET MVC 4 Script bundling causes errors upon deployment

Question

My website is working fine on localhost when @Scripts.Render() is not bundling the scripts however when I deploy to my server the bundled Javascript must contain an error as all Javascript on my page stops working.

Here is my bundle code:

        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js",
                    "~/Scripts/jquery-migrate-{version}.js"));

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

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

            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));
        }

Here is my rendering code:

@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/modernizr")

Can someone explain what might be happening to my Javascript upon deployment?

Thanks, Alex.

Answer 1

You can also change your "new ScriptBundle" to just "new Bundle":

bundles.Add(new Bundle("~/bundles/modernizr").Include("~/Scripts/modernizr-*"));

This will bundle your assets without minification. I have run into some cases where minifying just wouldn't work with certain libraries, so this will still allow you to include them in your bundle.

Answer 2

Usually the only difference between debugging and deployed bundles is that optimisations are switched off when you are debugging.

When optimisations are switched on, it is possible for the minification to highlight a syntax error that would be forgiven if there was a line break. For example:

var x = 10
var y = 15

Un-minified, this would probably work - but minified you end up with...

var x = 10 var y = 15 // SyntaxError: missing ; before statement

Which won't work - you need the missing ; characters in there.

If you debug the script, you should be able to see where the error is.