CODEWITHSUNDEEP
c#jqueryasp.netasp.net-mvcasp.net-mvc-4
Brendan Vogt
Brendan Vogt

Reputation: 26018

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

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:

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

Upvotes: 3

Views: 3928

Answers (1)

Ofiris
Ofiris

Reputation: 6141

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.

Upvotes: 13

Related Questions