web-dev-qa-db-fra.com

Require.js Erreur: délai de chargement des modules: backbone, jquerymobile

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

Traçage des dépendances pour: init

Error: Load timeout for modules: backbone,jquerymobile

La commande que je lance 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?

javascriptjquerybackbone.jsrequirejs
57
Devin Dixon

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

RequireJS waitSeconds

Voici un exemple d'utilisation de waitSeconds:

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);
    }
);
103
Mike Barlow - BarDev

L'erreur

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

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

Uncaught Error: Load timeout for modules

La console du développeur est la clé ici car je n'ai pas eu l'erreur quand la console n'était pas ouverte. J'ai essayé de réinitialiser tous les paramètres de chrome, de désinstaller un plugin,… rien n'y faisait. 

La solution

Le gros pointeur était une discussion de groupe de Google (voir les ressources ci-dessous) sur l’option waitSeconds config. Régler cela à 0 a résolu mon problème. Je ne voudrais pas vérifier ceci car cela fixe simplement le délai d'attente à l'infini. Mais comme solution au 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:

  • erreurs dans les modules
  • chemins incorrects dans la configuration (cochez les options paths et baseUrl)
  • double entrée dans config

Plus de ressources

La page de dépannage de requireJS: http://requirejs.org/docs/errors.html#timeout point 2, 3 et 4 peut présenter un intérêt.

Question SO similaire: Ondulation - Erreur non capturée: Délai de chargement des modules: app http://requirejs.org/docs/errors.html#timeout

Discussion relative aux groupes Google: https://groups.google.com/forum/#!topic/requirejs/70HQXxNylYg

41
hcpl

Si d’autres ont ce problème et le luttent toujours (comme j’étais), ce problème peut également provenir de dépendances circulaires, par exemple. A dépend de B et B dépend de A.

La RequireJS docs ne mentionne pas que les dépendances circulaires peuvent provoquer l'erreur "Load timeout", mais je l'ai maintenant observée pour deux dépendances circulaires différentes.

17
Aaron

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

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

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

15
Eduscho

La raison de ce problème est que Require.js s'exécute dans le délai d'attente, car le projet peut avoir des dépendances par rapport à des bibliothèques volumineuses. 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. Une bonne approche consisterait à améliorer le temps de chargement de la page. Une des meilleures techniques pour accélérer le chargement d'une page est minification - le processus de compression du code. Il existe quelques bons outils de minification comme r.js ou webpack . 

1
Lyudmyla

Je ne reçois 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 construction réussie pour l'instant. Je mettrai à jour si ma construction échoue à nouveau

0
Adam Spence