CODEWITHSUNDEEP
javascriptasp.net-mvc-4bundling-and-minification
MR.ABC
MR.ABC

Reputation: 4862

Bundling JavaScript courses Uncaught SyntaxError: Unexpected token <

Using the bundle feature of mvc4 courses

Uncaught SyntaxError: Unexpected token <

on loading. With debug="true" everything is works like excepted.

How can i solve the error or can i disable the bundle feature just for scripts?

Solved
Renamed the bundle name to not match up with any directory

Upvotes: 5

Views: 6277

Answers (3)

JoshYates1980
JoshYates1980

Reputation: 3626

My issue: I reference script files in my Content folder but have a bundle name of ~Scipts. I renamed my bundle to ~DefaultScripts and that fix my issue. I didn't want to reference the Scripts folder, but it was going there instead of my Content folder.

  bundles.Add(New ScriptBundle("~/Scripts").Include(
              "~/Content/assets/global/plugins/jquery.min.js",
              "~/Content/assets/global/plugins/bootstrap/js/bootstrap.min.js",
              "~/Content/assets/global/plugins/js.cookie.min.js",
              "~/Content/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js",
              "~/Content/assets/global/plugins/jquery.blockui.min.js",
              "~/Content/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js",
              "~/Content/assets/global/scripts/app.js",
              "~/Content/assets/layouts/layout2/scripts/layout.min.js",
              "~/Scripts/custom.js"))




  bundles.Add(New ScriptBundle("~/DefaultScripts").Include(
              "~/Content/assets/global/plugins/jquery.min.js",
              "~/Content/assets/global/plugins/bootstrap/js/bootstrap.min.js",
              "~/Content/assets/global/plugins/js.cookie.min.js",
              "~/Content/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js",
              "~/Content/assets/global/plugins/jquery.blockui.min.js",
              "~/Content/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js",
              "~/Content/assets/global/scripts/app.js",
              "~/Content/assets/layouts/layout2/scripts/layout.min.js",
              "~/Scripts/custom.js"))

Upvotes: 0

Christian Cody
Christian Cody

Reputation: 127

His solution helped me, renaming the bundle to be different than the directory. I was grouping mine like so:

@Styles.Render("~/jqueryui")
@Scripts.Render("~/jqueryui")

There seems to be a bug when doing it this way with jquery UI styles. I just renamed the bundle to:

@Styles.Render("~/jqueryuiz")
@Scripts.Render("~/jqueryui")

and this fixed it for me. So the scripts don't seem to be affected in this way, nor do similar bundles, I have about 20 sets of bundles loaded and this is the only one causing issues.

Upvotes: 0

Grinn
Grinn

Reputation: 5543

Before you can answer the question of what caused this error, you must first figure out where the error occurred. The only difference in the syntax of your code when bundled is that it is minified. A very simple way to do this is to use a Bundle instead of a ScriptBundle:

        var thirdParty = new Bundle("~/bundles/thirdParty").Include(
            "~/Scripts/jquery-{version}.js",
            "~/Scripts/bootstrap.js",
            "~/Scripts/jquery-ui-{version}.js",
            "~/Scripts/jquery.mockjson.js",
            "~/Scripts/jQuery.XDomainRequest.js",
            "~/Scripts/knockout-{version}.js"
            );

        thirdParty.Transforms.Clear();

        bundles.Add(thirdParty);

Now, if you have multiple JavaScript bundles, do this for them one by one until you have the culprit bundle.

The only way that I've found to debug these issues is to take your bundle and split it in half to break it down further:

        var thirdParty1 = new Bundle("~/bundles/thirdParty1").Include(
            "~/Scripts/jquery-{version}.js",
            "~/Scripts/bootstrap.js",
            "~/Scripts/jquery-ui-{version}.js"
            );

        bundles.Add(thirdParty1);

        var thirdParty2 = new ScriptBundle("~/bundles/thirdParty2").Include(
            "~/Scripts/jquery.mockjson.js",
            "~/Scripts/jQuery.XDomainRequest.js",
            "~/Scripts/knockout-{version}.js"
            );

        bundles.Add(thirdParty2);

Notice that we've only disabled minification for one of the two bundles - thirdParty1. Be sure and update your @Scripts.Render to point to your new bundles. When you build and reload, you will either continue to get the error, or you won't, and will then know which half contains the troublesome code. But be sure and test it both ways, minifying thirdParty1 and unminifying thirdParty2 in my example and vice-versa to be certain something else isn't going on. You also might want to keep DevTools or whatever browser debugger you have open and look at the source of your bundles to ensure they are acting as expected.

Continue by moving the scripts from the minified bundle (thirdParty1 in my case) from the unminified bundle (thirdParty2) either one at a time or in chunks, if you have a lot of scripts. Remember to rebuild in-between, and be careful not to change the inclusion order of your scripts.

That should at least get you down to the file that has the issue - and hopefully searching for "<" will get you your answer.

Hope that helps.

Upvotes: 8

Related Questions