web-dev-qa-db-ja.com

一致しない匿名define（）モジュール

webapp を初めて閲覧するときに（通常、キャッシュが無効になっているブラウザで）このエラーが発生します。

エラー：匿名のdefine（）モジュールの不一致：関数（必須）{

HTML：

<html>
   .
   .
   .
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
   <script> var require = { urlArgs: "v=0.4.1.32" }; </script>
   <script data-main="assets/js/main" src="assets/js/libs/require.js"></script>
   <script src="assets/js/ace/ace.js?v=0.4.1.32"></script>
   </body>
</html>

JS：

$(function () {
    define(function (require) {
        // do something
    });
});

誰もがこのエラーが何を意味するのか、そしてなぜそれが起こっているのかを正確に知っていますか？

ソースファイル 、a ショートディスカッション github issuesページでそれについて

javascriptjqueryrequirejs
108
Adonis K. Kakoulidis

AlienWebguyが言ったように、ドキュメントによると、 require.jsは爆発する可能性があります if

  • 独自のスクリプトタグに匿名の定義（「define（）を呼び出すID」文字列なしのモジュール）があります（実際には、グローバルスコープ）
  • 競合する名前を持つモジュールがあります
  • ローダープラグインまたは匿名モジュールを使用しますが、require.jsのオプティマイザーを使用してそれらをバンドルしないでください

Require.jsモジュールと共にbrowserifyでビルドされたバンドルを含めると、この問題が発生しました。解決策は次のいずれかです。

A.スクリプトタグに非require.jsスタンドアロンバンドルをロードするbeforerequire.jsがロードされる、または

B.（scriptタグの代わりに）require.jsを使用してロードする

127
B T

Requirejsファイルをスクリプトタグに直接含まれる他のライブラリとともに含めたため、このエラーが発生しました。これらのライブラリ（lodashなど）は、requireの定義と競合する定義関数を使用しました。 requirejsファイルは非同期にロードされていたため、他のライブラリが定義した後にrequireの定義が定義されたため、競合が疑われます。

エラーを取り除くには、requirejsを使用して他のすべてのjsファイルを含めます。

12
eloone

docs ：

HTMLでスクリプトタグを手動でコーディングして、匿名のdefine（）呼び出しでスクリプトをロードすると、このエラーが発生する可能性があります。

また、HTMLでスクリプトタグを手動でコーディングして、いくつかの名前付きモジュールを含むスクリプトをロードした後、手動でロードしたスクリプトの名前付きモジュールの1つと同じ名前を持つ匿名モジュールをロードしようとした場合にも見られますコード化されたスクリプトタグ。

最後に、ローダープラグインまたは匿名モジュール（文字列IDなしでdefine（）を呼び出すモジュール）を使用し、RequireJSオプティマイザーを使用してファイルを結合しない場合、このエラーが発生する可能性があります。オプティマイザは、最適化されたファイル内の他のモジュールと組み合わせることができるように、匿名モジュールを正しく命名する方法を知っています。

エラーを回避するには：

  • RequireJS APIを介してdefine（）を呼び出すすべてのスクリプトを必ずロードしてください。 define（）呼び出しを含むスクリプトをロードするために、HTMLでスクリプトタグを手動でコーディングしないでください。

  • HTMLスクリプトタグを手動でコーディングする場合は、名前付きモジュールのみが含まれていること、およびそのファイル内のモジュールの1つと同じ名前を持つ匿名モジュールがロードされていないことを確認してください。

  • 問題がローダープラグインまたは匿名モジュールの使用であるが、ファイルバンドルにRequireJSオプティマイザーが使用されていない場合は、RequireJSオプティマイザーを使用します。

10
AlienWebguy

Reactjsを使い始めたときに問題にぶつかりました。初心者として docs もギリシャ語で書かれているかもしれません。

私が遭遇した問題は、初心者の例のほとんどが、「string id」を使用する必要があるときに「anonymous define」を使用することでした。

匿名定義

define(function() {
        return { helloWorld: function() { console.log('hello world!') } };
 })


define(function() {
        return { helloWorld2: function() { console.log('hello world again!') } };
 })

文字列IDで定義する

define('moduleOne',function() {
    return { helloWorld: function() { console.log('hello world!') } };
})

 define('moduleTwo', function() {
      return { helloWorld2: function() { console.log('hello world again!') } };
})

defineを文字列idで使用すると、次のようにモジュールを使用するときにこのエラーを回避できます。

require([ "moduleOne", "moduleTwo" ], function(moduleOne, moduleTwo) {
    moduleOne.helloWorld();
    moduleTwo.helloWorld2();
});
8
P.Brian.Mackey

一部のブラウザ拡張機能は、ページにコードを追加できることに注意してください。私の場合、私はrequireJsを台無しにした「すべてのテキストエリアのエメット」プラグインを持っていました。ブラウザでドキュメントを調べて、ドキュメントに余分なコードが追加されていないことを確認してください。

5
Vector

既存の回答は問題をよく説明していますが、古いコードのためにrequireJSを使用してまたは前にスクリプトファイルを含めるのが簡単なオプションではない場合、スクリプトタグの前にウィンドウスコープからrequireを削除してからそれを元に戻すことです。私たちのプロジェクトでは、これはサーバー側の関数呼び出しの背後にラップされていますが、実際にはブラウザーには次のように表示されます。

    <script>
        window.__define = window.define;
        window.__require = window.require;
        window.define = undefined;
        window.require = undefined;
    </script>
    <script src="your-script-file.js"></script>        
    <script>
        window.define = window.__define;
        window.require = window.__require;
        window.__define = undefined;
        window.__require = undefined;
    </script>

最近ではありませんが、機能しているようで、多くの屈折を節約しました。

4
jcbdrn

または、このアプローチを使用できます。

  • コードベースにrequire.jsを追加します
  • 次に、そのコードを介してスクリプトをロードします

<script data-main="js/app.js" src="js/require.js"></script>

require.jsを読み込んだ後にスクリプトを読み込みます。

1
Umar Asghar