[javascript] ASP.NET MVC Bundle not rendering script files on staging server. It works on development server

In our ASP.NET MVC 4 web application, our BundleConfig.cs includes the following:

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

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

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

When we look at the html of the home page on development server, we can see the following script tags even though the debug mode in web.config is set to true as <compilation debug="true" targetFramework="4.0" />:

<script src="/AFR/Scripts/jquery-ui-1.8.20.min.js"></script>
<script src="/AFR/Scripts/modernizr-2.5.3.js"></script>
<script src="/AFR/Scripts/jquery-1.7.1.js"></script>
<script src="/AFR/Scripts/jquery-ui-1.8.20.js"></script>
<script src="/AFR/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/AFR/Scripts/jquery.validate.js"></script>
<script src="/AFR/Scripts/jquery.validate.unobtrusive.js"></script>

But when we deploy the app on staging server and look at the html (View Source) of the home page, all of the above script tags with the exception of <script src="/AFR/Scripts/jquery-ui-1.8.20.min.js"></script> are missing. We've verified that all the files mentioned in these tags are in the script folder. The folder structure is exactly the same as on development machine. On staging server, the web.config fie has <compilation targetFramework="4.0" /> which means, by default, the debug="false".

As a result, some of the JavaScript functions are failing on staging server. Both the staging and development machines are Windows 2012.

Please help. Thanks.

This question is related to javascript asp.net-mvc-4

The answer is


add to your global file this action.

protected void Application_Start() {
   BundleConfig.RegisterBundles(BundleTable.Bundles);
}

By adding following code of line in bundle to config it works for me

bundles.IgnoreList.Clear();  

Follow the link for more explanation


Whenever I set debug="off" in my web.config and run my mvc4 application i would end up with ...

<script src="/bundles/jquery?v=<some long string>"></script>

in my html code and a JavaScript error

Expected ';'

There were 2 ways to get rid of the javascript error

  1. set BundleTable.EnableOptimizations = false in BundleConfig.cs

OR

  1. I ended up using NuGet Package Manager to update WebGrease.dll. It works fine irrespective if debug= "true" or debug = "false".

For me, the fix was to upgrade the version of System.Web.Optimization to 1.1.0.0 When I was at version 1.0.0.0 it would never resolve a .map file in a subdirectory (i.e. correctly minify and bundle scripts in a subdirectory)


I ran into the same problem, and I'm not sure why, but it turned out to be that the script link generated by Scripts.Render did not have a .js extension. Because it also does not have a Type attribute the browser was just unable to use it (chrome and firefox).

To resolve this, I changed my bundle configuration to generate compiled files with a js extension, e.g.

            var coreScripts = new ScriptBundle("~/bundles/coreAssets.js")
            .Include("~/scripts/jquery.js");

        var coreStyles = new StyleBundle("~/bundles/coreStyles.css")
            .Include("~/css/bootstrap.css");

Notice in new StyleBundle(... instead of saying ~/bundles/someBundle, I am saying ~/bundlers/someBundle.js or ~/bundles/someStyles.css..

This causes the link generated in the src attribute to have .js or .css on it when optimizations are enabled, as such the browsers know based on the file extension what mime/type to use on the get request and everything works.

If I take off the extension, everything breaks. That's because @Scripts and @Styles doesn't render all the necessary attributes to understand a src to a file with no extension.


Things to check when enabling the bundle optimization;

BundleTable.EnableOptimizations = true;

and

webconfig debug = "false"
  1. the bundles.IgnoreList.Clear();

this will ignore the minified assets of your bundles like *.min.css or *.min.js which can cause an undefine error of your script. To fix is replace the .min asset to original. if you do this you may not need the bundles.IgnoreList.Clear(); e.g.

bundles.Add(new ScriptBundle("~/bundles/datatablesjs")
      .Include("~/Scripts/datatables.min.js") <---- change this to non minified ver.
  1. Make sure the names of the bundles of your css and js are unique.

    bundles.Add(new StyleBundle("~/bundles/datatablescss").Include( ...) );

    bundles.Add(new ScriptBundle("~/bundles/datatablesjs").Include( ...) );

  2. Make sure you use the Render name of your @Script.Render and Style.Render are the same on your bundle config. e.g.

    @Styles.Render("~/bundles/datatablescss")

    @Scripts.Render("~/bundles/datatablesjs")


I used Identity2 then Scripts didn't load for anonymous user then I add this code in webconfig and Sloved.

<location path="bundles">
<system.web>
  <authorization>
    <allow users="*" />
  </authorization>  
</system.web>
 </location>