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

J'essaie d'utiliser r.js pour optimiser mon code mais je continue à courir sur cette erreur:

Dépendances de suivi pour: init

Error: Load timeout for modules: backbone,jquerymobile 

La commande que je suis en cours d'exécution est la suivante:

 $ 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 

Mon fichier build.js ressemble à ceci:

 ( { //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 }) 

Et mon init.js ressemble à ceci:

  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 }); 

Qu'est-ce que je fais mal dans ce processus de construction?

Require.js a une option de configuration appelée waitSeconds. Cela peut aider.

RequireJS waitSeconds

Voici un exemple où WaitSeconds est utilisé:

 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); } ); 

L'erreur

J'ai récemment eu un problème très similaire avec un projet requireJS utilisant requireJS .

J'utilise Chrome canary build ( Version 34.0.1801.0 canary ), mais Version 34.0.1801.0 canary également installé une version stable ( Version 32.0.1700.77 ) montrant exactement le même problème lors du chargement de l'application avec la Developer console ouverte:

 Uncaught Error: Load timeout for modules 

La console du développeur est la clé ici car je n'ai pas eu l'erreur lorsque la console n'était pas ouverte. J'ai essayé de réinitialiser tous les paramètres de chrome, de désinstaller n'importe quel plugin, … rien n'a été aidé jusqu'ici.

La solution

Le grand pointeur était une discussion de groupe Google (voir les ressources ci-dessous) concernant l'option waitSeconds config. Définir cela à 0 résolus mon problème. Je ne vérifierais pas cela puisque cela limite le délai d'attente à l'infini. Mais comme une solution lors du développement, c'est très bien. Exemple de configuration :

 <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> 

Les autres causes les plus courantes de cette erreur sont les suivantes:

  • Erreurs dans les modules
  • Mauvais chemin dans la configuration (check paths and baseUrl option)
  • Double saisie dans config

Davantage de ressources

La page de dépannage à partir de requireJS: http://requirejs.org/docs/errors.html#timeout point 2, 3 et 4 peut être intéressante.

Question similaire: Ripple – Erreur non détectée: délai de chargement pour les modules: application http://requirejs.org/docs/errors.html#timeout

Une discussion de groupes Google associée: https://groups.google.com/forum/#!topic/requirejs/70HQXxNylYg

Dans le cas où d'autres ont ce problème et qui continuent de le faire (comme je l'étais), ce problème peut également résulter de dépendances circulaires, par exemple A dépend de B et B dépend de A.

Les documents RequireJS ne mentionnent pas que les dépendances circulaires peuvent causer l'erreur "Load timeout", mais je l'ai maintenant observé pour deux dépendances circulaires différentes.

Valeur par défaut pour waitSeconds = 7 (7 secondes)

Si réglé sur 0, le délai d'attente est complètement désactivé.

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

La raison du problème est que Require.js se heurte à l'expiration du délai, car le projet pourrait avoir des dépendances pour les grandes bibliothèques. Le délai d'attente par défaut est de 7 secondes. L'augmentation de la valeur de cette option de configuration (appelée waitSeconds) la résout bien sûr, mais ce n'est pas la bonne approche. L'approche correcte serait d' améliorer le temps de chargement de la page . L'une des meilleures techniques pour accélérer le chargement d'une page est la minification : le processus de compression du code. Il existe de bons outils pour la minification comme r.js ou webpack .

Je n'obtiens cette erreur que lors de l'exécution de tests sur Mobile Safari 6.0.0 (iOS 6.1.4). waitSeconds: 0 m'a donné une compilation réussie pour l'instant. Je vais mettre à jour si ma compilation échoue à nouveau