Strange JavaScript error when using ASP.NET MVC package and minifying it
I use ASP.NET MVC 5
with bundling and minification
and get weird error when I set debug to false in mine web.config
.
I've been using binding and minification for some time now and first saw this error last night because my dropdown was not working. I cannot confirm that this worked because I have never checked the files.
Here's a 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 create a standalone ASP.NET MVC project with the bare minimum, just using jQuery 2.1.1
. I still have the error. So I thought it would go away if I use jQuery 1.11.1
. I still get the same error.
Why am I getting this error? This is clearly something in the jQuery file. I got the same error with Bootstrap JavaScript file.
When is the best time to use binding and minification? With just your own JavaScript and CSS files? Should you link and minify third-party files, or rather just use their CDN? I am 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"));
}
}
Output Output:
<!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>
There are also problems with these two files:
- html5shiv.js
- Respond.js
So the question is, are these invalid JavaScript bugs or is it a bunch and minification full of bugs?
source to share
There is a problem with:
bundles.Add(new StyleBundle("~/bundles/js").Include(
"~/Scripts/jquery-{version}.js"));
Use ScriptBundle
instead StyleBundle
as per js files:
bundles.Add(new ScriptBundle("~/bundles/js").Include(
"~/Scripts/jquery-{version}.js"
));
You probably copied the code StyleBundle
from your project into a simple project MVC
.
source to share