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.

Ryan Ferretti · Accepted Answer · 2013-02-22T17:17:26.357

24

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.

edited Feb 22 '13 at 17:17

answered Feb 22 '13 at 16:57

Ryan Ferretti

2,891
2
27
37

8

Note: if you specify a file and a .min.js file exists for that file on disk, you'll get the .min version in the bundle, even if you just use Bundle() per above. – jessewolfe Dec 03 '14 at 23:16
I have also same problem. I changed "new ScriptBundle" to "new Bundle" and it worked fine. Will there be any performance problems when doing this? Because it's so annoying that I think of adding all libraries in this way. Finally, does it make sense to add a minified version in "new Bundle"? – Feb 02 '20 at 13:03

Micaël Félix · Answer 2 · 2016-03-14T07:36:35.660

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.

"_...ASP.Net seems to use .min files in priority when bundling..._" this turned out to be hiding an error in our code. We had made a change to a .js file, but NOT to the minified version. In testing everything was great (no bundle, used normal file) but in production (minified file) we kept having issues. Fun debugging! — Chakrava, Mar 07 '16 at 23:48

score 8 · Answer 3 · answered Jan 17 '13 at 14:31

8

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.

answered Jan 17 '13 at 14:31

Fenton

241,084
71
387
401

I hadn't even thought of this! – Ryan Ferretti Feb 22 '13 at 16:58
3

That would be a very bad minifier. – basarat May 07 '13 at 00:26
2

@BasaratAli don't code to a specific implementation of a minifier. – Fenton May 07 '13 at 07:32
4

Even if you shouldn't rely on an implementation, a minifier that requires syntax not required by the language itself, is a bad minifier. – Shocked Jan 28 '16 at 14:22
1

I believe it's best practice to include the semi-colon, regardless of the minifier. Just my two cents. If you discipline yourself to maintain best practices then you wouldn't have any of these issues with any library or framework. – Necromancer Feb 20 '17 at 16:57
The example snippet, `var x= ...` is not a forgivable syntax error, it is correct JS. A minifier that doesn't handle it is a broken minifier. Avoiding ASI in js is not a 'best-practise', it's a coding style. – Chris F Carroll Sep 17 '18 at 11:21

score 0 · Answer 4 · edited May 23 '17 at 12:09

0

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

Taken from here.

edited May 23 '17 at 12:09

Community

1
1

answered Oct 23 '13 at 14:20

shiroxx

177
1
2

ASP.NET MVC 4 Script bundling causes errors upon deployment

4 Answers4

The minification "works" even if that errors appears

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

Linked