web-dev-qa-db-ja.com

Require.jsエラー：モジュールのロードタイムアウト：バックボーン、jquerymobile

R.jsを使用してコードを最適化しようとしていますが、このエラーが発生し続けます。

依存関係のトレース：init

Error: Load timeout for modules: backbone,jquerymobile

私が実行しているコマンドは次のとおりです。

$ 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

私のbuild.jsファイルは次のようになります。

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

そして、私のinit.jsは次のようになります：

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

このビルドプロセスで何が間違っていますか？

javascriptjquerybackbone.jsrequirejs
59
Devin Dixon

Require.jsには、waitSecondsというConfigオプションがあります。これが役立つ場合があります。

RequireJS waitSeconds

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

エラー

最近、angularJSを使用するrequireJSプロジェクトで非常によく似た問題が発生しました。

Chromeカナリアビルド（Version 34.0.1801.0 canary）を使用していますが、Version 32.0.1700.77 openでアプリを読み込むときにまったく同じ問題を示す安定バージョン（Developer console）もインストールされています：

Uncaught Error: Load timeout for modules

ここで重要なのは開発者コンソールです。コンソールが開いていなかったときにエラーが表示されなかったからです。すべてのchrome設定をリセットし、プラグインをアンインストールしようとしましたが、これまで何も助けになりませんでした。

ソリューション

大きな指針は、waitSeconds configオプションに関するGoogleグループのディスカッション（以下のリソースを参照）でした。これを0に設定すると、問題が解決しました。これはタイムアウトを無限に設定するだけなので、チェックインしません。しかし、開発中の修正として、これは問題ありません。 設定例 ：

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

このエラーの他の最も一般的な原因は次のとおりです：

  • モジュールのエラー
  • 構成内の誤ったパス（pathsおよびbaseUrlオプションを確認してください）
  • 構成内の二重エントリ

その他のリソース

RequireJSのトラブルシューティングページ： http://requirejs.org/docs/errors.html#timeout ポイント2、3、および4が興味深い場合があります。

同様のSO質問： Ripple-Uncaught Error：Load timeout for modules：app http://requirejs.org/docs/errors.html#timeout

関連するGoogleグループのディスカッション： https://groups.google.com/forum/#!topic/requirejs/70HQXxNylYg

41
hcpl

他の人がこの問題を抱えており、まだ苦労している場合（私がそうであったように）、この問題は循環依存関係からも発生する可能性があります。 AはBに依存し、BはAに依存します。

RequireJS docs 循環依存関係により「ロードタイムアウト」エラーが発生する可能性があることは言及していませんが、2つの異なる循環依存関係について確認しました。

18
Aaron

WaitSecondsのデフォルト値= 7（7秒）

0に設定すると、タイムアウトは完全に無効になります。

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

17
Eduscho

この問題の理由は、プロジェクトが大きなライブラリに依存している可能性があるため、Require.jsがタイムアウトになることです。デフォルトのタイムアウトは7秒です。この構成オプション（waitSecondsと呼ばれる）の値を増やすと、もちろん解決しますが、これは正しいアプローチではありません。正しいアプローチは、ページの読み込み時間を改善することです。ページの読み込みを高速化するための最良のテクニックの1つは、minification-コードを圧縮するプロセスです。 r.js や webpack のような縮小化のための優れたツールがいくつかあります。

2
Lyudmyla

Mobile Safari 6.0.0（iOS 6.1.4）でテストを実行しているときにのみ、このエラーが発生します。 waitSeconds: 0は今のところビルドに成功しています。これでビルドが再び失敗したら更新します

0
Adam Spence