Weird JavaScript error when using ASP.NET MVC bundling and minification

Question

I am using ASP.NET MVC 5 with bundling and minification and getting a weird error when I set debug to false in my web.config.

I have been using bundling and minification for some time now and only saw this error last night for the first time because my dropdown menu didn't work. I can't confirm if this has worked because I never checked the files.

Here is the partial error:

/* Minification failed. Returning unminified contents.
(2,1): run-time error CSS1019: Unexpected token, found '!'
(2,2): run-time error CSS1019: Unexpected token, found 'function('
(2,14): run-time error CSS1031: Expected selector, found ')'
(2,14): run-time error CSS1025: Expected comma or open brace, found ')'
(2,212): run-time error CSS1019: Unexpected token, found '('
(2,213): run-time error CSS1019: Unexpected token, found '"undefined"'
(2,224): run-time error CSS1019: Unexpected token, found '!'
(2,225): run-time error CSS1019: Unexpected token, found '='
(2,239): run-time error CSS1031: Expected selector, found '?'
(2,239): run-time error CSS1025: Expected comma or open brace, found '?'
(3): Scanner error CSS1002: Unterminated string: '></a>","#"===a.firstChild.getAttribute("href")})||jb("type|href|height|width",function(a,b,c){return c...

So I decided to created a stand alone ASP.NET MVC project with the bare minimum, just using jQuery 2.1.1. I still got the error. So I thought that it would disappear if I were to use jQuery 1.11.1. I still get the same error.

Why do I get this error? It's obviously something in the jQuery file. I got the same error with Bootstrap's JavaScript file.

When is it best to use bundling and minification? Only with your own JavaScript and CSS files? Should you bundle and minify third party files as well or rather just use their CDNs? I'm behind a firewall at work so using an external CDN is not an option for me.

Here is my web.config:

<system.web>
    <compilation targetFramework="4.5.2" />
    <httpRuntime targetFramework="4.5.2" />
</system.web>

My _Layout file:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>My Website</title>
    </head>
    <body>
        @RenderBody()
        @Scripts.Render("~/bundles/js")
    </body>
</html>

And my BundleConfig.cs file:

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new StyleBundle("~/bundles/js").Include(
            "~/Scripts/jquery-{version}.js"));
    }
}

The output produced is:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>My Website</title>
    </head>
    <body>
        <h2>Index</h2>
        <script src="/bundles/js?v=7gm4LP0WuTab97QPOJSizw2PGm8jrBl7HRdnANRLbBY1"></script>
    </body>
</html>

It is also have issues with these 2 files:

html5shiv.js
Respond.js

So the question is, is it invalid JavaScript errors or is it the bundling and minification that is full of bugs?

Ofiris · Accepted Answer · 2014-12-03 08:13:15Z

13

There is a problem with:

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

Use ScriptBundle instead of StyleBundle as appropriate to js files:

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

You have probably copied the StyleBundle code from you project into the plain MVC project.

answered Dec 3, 2014 at 8:13

Ofiris

6,1716 gold badges38 silver badges59 bronze badges

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

2 Comments

Brendan Vogt Over a year ago

Thanks. I can't believe that I missed this. Don't know how I changed. You are probably right, I copied and pasted it from somewhere else.

Ofiris Over a year ago

Near your RegisterBundles method, you can create RegisterStyles and RegisterScripts methods, call them from RegisterBundles, I think its a good practice.

Collectives™ on Stack Overflow

Weird JavaScript error when using ASP.NET MVC bundling and minification

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related