web-dev-qa-db-ja.com

推奨されるPopperJSバージョンを使用した後でも、RequireJS経由でPopperJSとBootstrap

Requirejsを介してjquery、popperjs、およびbootstrap（v4-beta））を読み込もうとしていますが、コンソールで次のように表示されます。

Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
    at bootstrap.js:6
    at bootstrap.js:6
    at bootstrap.js:6

これがメインの私のコードです：

requirejs.config({

  paths: {
    'jquery': 'lib/jquery',
    'popper': 'lib/popper',
    'bootstrap': 'lib/bootstrap'
  },

  shim: {
    'bootstrap': ['jquery', 'popper']
  }

});

requirejs(['jquery', 'popper', 'bootstrap'], function(jquery, popper, bootstrap) {});

これは、popper.jsとbootstrap with requirejs。Yesのロードに関する問題に関して、すでに数回質問されています。参照されているumdバージョンを使用しています ここ 。

すべてがページに正しく読み込まれています。

<script data-main="js/main.js" src="js/require.js"></script>
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="main" src="js/main.js"></script>
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="jquery" src="js/lib/jquery.js"></script>
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="popper" src="js/lib/popper.js"></script>
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="bootstrap" src="js/lib/bootstrap.js"></script>

なぜまだこのエラーが発生するのか混乱していて、require設定に問題があると考え始めています。何か案は？

javascripttwitter-bootstraprequirejsbootstrap-4popper.js
7
Mike

Bootstrap PR＃22888 がリリースされるまで、これがBootstrap dropdown require Popper.js (https://popper.js.org)の問題を修正した方法です...

他の ブログ投稿 で言及されているものと同様に、Bootstrapをラップする独自のモジュールを作成するというアイデアです。次に、このモジュールは、bootstrapをロードする前に、所定の方法でpopper.jsをロードおよび設定します。

requirejs.config({
    "paths" : {
        "jquery"        : "https://code.jquery.com/jquery-3.2.1.slim.min",
        "popper"        : "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min",
        "bootstrap"     : "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min"
        "initBootstrap" : "...wotever..."
    },
    "shim" : {
        "bootstrap" : ["jquery"]
    }
});

...

define("initBootstrap", ["popper"], function(popper) {
    // set popper as required by Bootstrap
    window.Popper = popper;
    require(["bootstrap"], function(bootstrap) {
        // do nothing - just let Bootstrap initialise itself
    });
});

ここで、コード/ WebサイトがinitBootstrapではなくbootstrapに依存するようにします。

または、 chasepeeler で言及されているように、新しいモジュールを作成したくない場合は、requireステートメントを追加するだけです。

require(["popper"], function(popper) {
    window.Popper = popper;
    require(["bootstrap"]);
});

これはGitHubの Bootstrap Popper Issue にも投稿されていることに注意してください。

3
Steve Eynon

または、「bootstrap.com/contents」：バンドルされたJSファイル（bootstrap.bundle.jsおよび縮小されたbootstrap.bundle.min.js）にはPopperが含まれますが、jQueryは含まれません。

そこで、ライブラリに追加しました。名前を変更し（ "bootstrap.bundle.min.js"-> "bootstrap.min"）、bootstrapのパスとjqueryのシムを作成しました。私にとってはうまくいったようです。

7
ogginger