Bundling JavaScript courses Uncaught SyntaxError: Unexpected token <

Question

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

Answer 1

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.