Require.js Error: Load timeout for modules: backbone,jquerymobile

Question

I am trying to use r.js to optimize my code but I keep running to this error:

Tracing dependencies for: init

Error: Load timeout for modules: backbone,jquerymobile

The command I am running is this:

$ java -classpath /Users/dixond/build-tools/rhino1_7R4/js.jar:/Users/dixond/build-tools/closurecompiler/compiler.jar org.mozilla.javascript.tools.shell.Main /Users/dixond/build-tools/r.js/dist/r.js -o /Users/dixond/Sites/omm_mobile/js/build.js

My build.js file looks like this:

( {
    //appDir: "some/path/",
    baseUrl : ".",
    mainConfigFile : 'init.js',
    paths : {
        jquery : 'libs/jquery-1.8.3.min',
        backbone : 'libs/backbone.0.9.9',
        underscore : 'libs/underscore-1.4.3',
        json2 : 'libs/json2',
        jquerymobile : 'libs/jquery.mobile-1.2.0.min'
    },
    packages : [],
    shim : {
        jquery : {
            exports : 'jQuery'
        },
        jquerymobile : {
            deps : ['jquery'],
            exports : 'jQuery.mobile'
        },
        underscore : {
            exports : '_'
        },
        backbone : {
            deps : ['jquerymobile', 'jquery', 'underscore'],
            exports : 'Backbone'
        }
    },
    keepBuildDir : true,
    locale : "en-us",
    optimize : "closure",
    skipDirOptimize : false,
    generateSourceMaps : false,
    normalizeDirDefines : "skip",
    uglify : {
        toplevel : true,
        ascii_only : true,
        beautify : true,
        max_line_length : 1000,
        defines : {
            DEBUG : ['name', 'false']
        },


        no_mangle : true
    },
    uglify2 : {},
    closure : {
        CompilerOptions : {},
        CompilationLevel : 'SIMPLE_OPTIMIZATIONS',
        loggingLevel : 'WARNING'
    },
    cssImportIgnore : null,
    inlineText : true,
    useStrict : false,
    pragmas : {
        fooExclude : true
    },
    pragmasOnSave : {
        //Just an example
        excludeCoffeeScript : true
    },
    has : {
        'function-bind' : true,
        'string-trim' : false
    },
    hasOnSave : {
        'function-bind' : true,
        'string-trim' : false
    },
    //namespace: 'foo',
    skipPragmas : false,
    skipModuleInsertion : false,
    optimizeAllPluginResources : false,
    findNestedDependencies : false,
    removeCombined : false,
    name : "init",
    out : "main-built.js",
    wrap : {
        start : "(function() {",
        end : "}());"
    },
    preserveLicenseComments : true,
    logLevel : 0,
    cjsTranslate : true,
    useSourceUrl : true
})

And my init.js looks like this:

 requirejs.config({
      //libraries
      paths: {
          jquery:       'libs/jquery-1.8.3.min',
          backbone:     'libs/backbone.0.9.9',
          underscore:   'libs/underscore-1.4.3',
          json2 :       'libs/json2',
          jquerymobile: 'libs/jquery.mobile-1.2.0.min'
      },

      //shimming enables loading non-AMD modules
      //define dependencies and an export object
      shim: {
          jquerymobile: {
              deps: ['jquery'],
              exports: 'jQuery.mobile'
          },
          underscore: {
              exports: '_'
          },
          backbone: {
              deps: ['jquerymobile', 'jquery', 'underscore', 'json2'],
              exports: 'Backbone'
          }
      }
    });


requirejs(["backbone",], function(Backbone) {
    //Execute code here
});

What am I doing wrong in this build process?

I have the same problem , but only happens in chrome , in your case too ? — Lucas Roselli, Jul 15 at 13:52

hcpl · Answer 1 · 2014-01-23 14:29:51Z

Require.js has a Config option called waitSeconds. This may help.

RequireJS waitSeconds

Here's an example where waitSeconds is used:

requirejs.config({
    baseUrl: "scripts",
    enforceDefine: true,
    urlArgs: "bust=" + (new Date()).getTime(),
    waitSeconds: 200,
    paths: {
        "jquery": "libs/jquery-1.8.3",
        "underscore": "libs/underscore",
        "backbone": "libs/backbone"
    },
    shim: {
        "underscore": {
            deps: [],
            exports: "_"
        },
        "backbone": {
            deps: ["jquery", "underscore"],
            exports: "Backbone"
        },
    }
});

define(["jquery", "underscore", "backbone"],
    function ($, _, Backbone) {
        console.log("Test output");
        console.log("$: " + typeof $);
        console.log("_: " + typeof _);
        console.log("Backbone: " + typeof Backbone);
    }
);

Thanks! I was having the same problem but I didn't think that it was actually a timeout issue. It must be due to the size or complexity of jQuery because the error only occurs when a dependency is declared on jQuery. Changing waitSeconds to something larger allowed the build to complete successfully. — Peter Rebholz, Jan 14 '13 at 14:47
I can confirm this. We have a bigger project with several dependencies to large libraries. With requireJS 2.0.6, that was fine. requireJS 2.1.4 however runs into the timeout. A higher value for waitSeconds solved it. — phammer, Jan 25 '13 at 11:07
Just opened a pull request to update the build.js example of require.js so that people become faster aware of the parameter. See github.com/jrburke/r.js/pull/362 — phammer, Jan 25 '13 at 11:36
Thanks! This helped me. I wonder, are most folks using a non-default value for this property? Is 200 pretty common? What about 0? — Josh Schultz, Feb 12 '13 at 17:00
I also get a timeout in iOS/Safari (and not iOS/Chrome!) when loading the first time after cache is cleared. Backbone views fail to load with timeout. Setting waitSeconds really high does not help. My require() call includes 8 modules, each of which include 2 - 3 of their own modules (some being text! templates). If I reduce the 8 modules to 5, things load fine under iOS/Safari. I've checked the file paths as well as for syntax errors a dozen times. — Chad Johnson, Apr 29 '13 at 17:55

hcpl · Answer 2 · 2014-01-23 14:29:13Z

The Error

I recently had a very similar issue with an angularJS project using requireJS.

I'm using Chrome canary build (Version 34.0.1801.0 canary) but also had a stable version installed (Version 32.0.1700.77) showing the exact same issue when loading the app with Developer console open:

Uncaught Error: Load timeout for modules

The developer console is key here since I didn't get the error when the console wasn't open. I tried resetting all chrome settings, uninstalling any plugin, ... nothing helped so far.

The Solution

The big pointer was a Google group discussion (see resources below) about the waitSeconds config option. Setting that to 0 solved my issue. I wouldn't check this in since this just sets the timeout to infinite. But as a fix during development this is just fine. Example config:

<script src="scripts/require.js"></script>
<script>
  require.config({
    baseUrl: "/another/path",
    paths: {
      "some": "some/v1.0"
    },
    waitSeconds: 0
  });
  require( ["some/module", "my/module", "a.js", "b.js"],
    function(someModule,    myModule) {
      //This function will be called when all the dependencies
      //listed above are loaded. Note that this function could
      //be called before the page is loaded.
      //This callback is optional.
    }
  );
</script>

Most common other causes for this error are:

errors in modules
wrong paths in configuration (check paths and baseUrl option)
double entry in config

More Resources

Troubleshooting page from requireJS: http://requirejs.org/docs/errors.html#timeout point 2, 3 and 4 can be of interest.

Similar SO question: Ripple - Uncaught Error: Load timeout for modules: app http://requirejs.org/docs/errors.html#timeout

A related Google groups discussion: https://groups.google.com/forum/#!topic/requirejs/70HQXxNylYg

Eduscho · Answer 3 · 2014-04-29 15:26:57Z

The default value for waitSeconds = 7 (7 Seconds)

If set to 0, timeout is completely disabled.

src: http://requirejs.org/docs/api.html

Aaron · Answer 4 · 2014-07-15 17:35:21Z

up vote6down vote

In case others have this issue and still struggling with it (like I was), this problem can also arise from circular dependencies, e.g. A depends on B, and B depends on A.

The RequireJS docs don't mention that circular dependencies can cause the "Load timeout" error, but I've now observed it for two different circular dependencies.

answered Jul 15 '14 at 17:35

Aaron
3782921

2

How did you go about identifying circular issues? Did you have to go through each defined module? – Paul Redmond Sep 30 '14 at 22:34

My issue came up when I added and changed some modules, so I was able to go through those changes, track down which added dependencies created the circular dependency loop, and remove them. – Aaron Oct 3 '14 at 20:02

1

xrayquire (a tool by requirejs) can check for circular dependencies – Druska Jan 28 at 14:51

observed when loading a module A inside a callback function from another module B which required module A – Jochen Bedersdorfer May 28 at 7:27

add a comment

Adam Spence · Answer 5 · 2014-08-15 10:35:33Z

I only get this error when running tests on Mobile Safari 6.0.0 (iOS 6.1.4). waitSeconds: 0 has given me a successful build for now. I'll update if my build fails on this again

Prageeth · Answer 6 · 2015-01-19 17:10:58Z

check you have done something like this

require(["Q", "jquery"], function (Q, $) {

this should be

require(["q", "jquery"], function (Q, $) {

because we have to load all q js with that name as it's since all module load by q do not enter any reference other than "q" (or name that your q js file.)