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.

Answer 3

The minification "works" even if that errors appears

The real solution for this is:

• Exclude .min and .map files BEFORE you publish

And the minification will work. In fact, the minification process always works!

If "it works", what is it really going on: why do we have an error?

ASP.Net seems to use .min files in priority when bundling with enabled optimizations. So it will also integrate any code in .min files and append every javascript file one after another without adding line breaks.

It is the browser that cannot understand why there is a potential comment /* After the min mapping configuration: //# sourceMappingURL=jquery.history.min.js.map Because bundled files will look like:

[SOMEJAVASCRIPT OF FILEJAVASCRIPT1 HERE;]
//# sourceMappingURL=jquery.history.min.js.map /* begin of a comment of FILEJAVASCRIPT2 appended (in the bundle) javascript file */

There are two solutions to avoid that error:

• Create separate bundles for the javascript files that can't follow (it's like not activating the bundling feature).
• Create a bundle that will not enable minification (bad)
• Or an alternative: exlude all minified files or the min.js files that have a sourceMappingURL (or change their source) and .map files

The goal would be to force ASP.Net to regenerate min files by itself (and ASP.Net will not make //sourceMappingUrl inside its generated file so it will fix that problem).

So the real problem is the current implementation of this feature inside the browsers because it cannot seem to parse comments for the comment of sourcemapping. Maybe there's another way to indicate the browser that the sourceMappingUrl has ended.

Answer 4

Check this solution
IIS Config>Authentication>RightClickOn Anonymous Auth>Click Edit> Check Application pool identity

Taken from here.