RequireJS module timeout while using packages

Question

Keep in mind that js works fine without packages. But whenever I use a package, I get timeouts for the modules I'm trying to import.

This is how I build packages using asp.net mvc bundler / minifier

bundles.Add(new ScriptBundle("~/bundles/test").Include( "~/scripts/jquery-{version}.js", "~/scripts/bootstrap.js", "~/scripts/moment.js")); bundles.EnableOptimizations = true; 

Heres is the js config requirement in the cshtml file:

 <script> require.config({ baseUrl: "/scripts", paths: { jquery: "jquery-1.11.2" }, waitSeconds: 20, shim: { bootstrap: { deps: ['jquery'] } }, bundles: { '@Scripts.Url("~/bundles/test").ToString()': [ 'jquery', 'bootstrap', 'moment' ] } }); require(["app/main/test"]); </script> 

And js for the page (app / main / test):

 require(['jquery', 'moment'], function ($, moment) { console.log(moment().format()); }); 

The Jquery, bootstrap, and moment libraries are in the test suite I created, but I get load timeouts by loading the page in an instant.

Here's the error of the chrome inspector:

Any ideas?

early.

Answer 1

This is because you do not require your package at all. Your query requires only jquery and moment. You provided the path to the jquery file, so requirejs uses this path to load and provide the jquery module. But since there is no path definition for the moment, this is only part of the package you created. Therefore, requirejs tries to load a moment by the name of its module as a path, and thus throws an error.

A simple fix for this is to require the package itself.

 require(['@Scripts.Url("~/bundles/test").ToString()'], function(bundle){ //At this point jquery, moment and bootstrap will be loaded. }); 

You can use jQuery, a moment from the global namespace in the example above directly, or you can ask for them separately in the example below. I'm not sure, but you may be mistaken with the example below due to cyclical dependency.

 require(['@Scripts.Url("~/bundles/test").ToString()', 'jquery', 'moment'], function(bundle, $, moment){ //At this point jquery, moment and bootstrap will be loaded. }); 

Answer 2

Just remove the 'jquery' from your packages

 bundles.Add(new ScriptBundle("~/bundles/test").Include( "~/scripts/bootstrap.js", "~/scripts/moment.js")); 

 ... bundles: { '@Scripts.Url("~/bundles/test").ToString()': [ 'bootstrap', 'moment' ] } ... 

You have already indicated the path

 paths: { jquery: "jquery-1.11.2" }, 

---

Require.js seems to map the modules into packages so that after loading the module, which is part of the package, this package does not load again.