web-dev-qa-db-ja.com

Bootstrap 4エラー「BootstrapドロップダウンにはPopper.jsが必要です」、Aurelia CLIおよびRequire.js

Requirejsを使用し、TypeScriptを使用してAurelia CLIアプリ（v0.31.1）でBootstrap 4 betaを構成するのに問題があります。いくつかの構成バリエーションを試した後、次のコンソールエラーが表示されます

不明なエラー：BootstrapドロップダウンにはPopper.jsが必要です

再現する手順は次のとおりです。まず、パッケージをインストールします。

$ npm install --save jquery [email protected] popper.js

次に、aurelia.jsonを設定しました：

  "jquery",
  {
    "name": "popper.js",
    "path": "../node_modules/popper.js/dist/umd",
    "main": "popper"
  },
  {
    "name": "bootstrap",
    "path": "../node_modules/bootstrap/dist",
    "main": "js/bootstrap.min",
    "deps": [
      "jquery",
      "popper.js"
    ],
    "exports": "$",
    "resources": [
      "css/bootstrap.css"
    ]
  }

上記の設定で次のことに注意してください。

  • popper.jsはブートストラップの前に登録されます
  • uMDモジュールが使用されている
  • popper.jsは、jqueryの隣のブートストラップの依存関係として設定されます

最後に、myapp.ts：

import 'bootstrap';

この構成では、au build 正常に動作します。しかし、実行時に、au run --watch次のコンソールエラーが表示されます。

不明なエラー：BootstrapドロップダウンにはPopper.jsが必要です（ https://popper.js.org ）（defaults.js：19）
Uncaught Error：Bootstrap dropdown require Popper.js（ https://popper.js.org ）（bootstrap.min.js：6）
...少し先：
Uncaught TypeError：plugin.loadはモジュールの関数ではありません。 （defaults.js：19）

残念なことに、Bootstrap 4ドキュメントは webpackの指示 のみに言及しています。Aureliaの Gitter.imチャンネル とStackOverflowの両方での検索も同様です。 Require.jsでAurelia CLIに関するサンプルを見つけることができません最後に、Googleヒットは、アルファ版（「ポッパー」ではなく「テザリング」に依存）を埋め込む例のみを示しています。

SOに関する同様の質問。同じエラーがありますが、私の状況には当てはまりません。

それで、私の質問：Aurelia CLIアプリでPopper.jsを使用してBootstrap 4を構成するにはどうすればよいですか（WebpackではなくRequire.jsを使用）？

ありがとう。

typescriptrequirejsaureliabootstrap-4aurelia-cli
13
Juliën

Popperはベータ版でTetherを置き換えました。

そのため、aurelia.jsonファイルのprependセクションにテッパーをポッパーと交換する必要があります（または、アルファがない場合は単に追加します）。 （下記のUMDバージョンにリンクしていることを確認してください）

"prepend": [
   ...
          "node_modules/jquery/dist/jquery.js",
          "node_modules/popper.js/dist/umd/popper.min.js",
   ...
     ]

また、次のような予想どおりのバンドルも必要になります。

      {
        "name": "bootstrap4",
        "path": "../node_modules/bootstrap/dist",
        "main": "js/bootstrap.min",
        "deps": [
          "jquery"
        ],
        "exports": "$",
        "resources": [
          "css/bootstrap.css"
        ]
      }

=補遺=

テザーとは異なり、ポッパーは先頭に追加する必要はありません。したがって、他の依存関係と同様にそれを含めることができます

 {
     "name": "popper.js",
     "path": "../node_modules/popper.js/dist/umd",
     "main": "popper.min"
 },
13
4imble

Popper.jsをアンインストールし、js/bootstrap.bundle.minの代わりにjs/bootstrap.minを使用してbs4に組み込まれたバージョンを使用しました

  "jquery",
  {
    "name": "bootstrap",
    "path": "../node_modules/bootstrap/dist",
    "main": "js/bootstrap.bundle.min",
    "deps": ["jquery"],
    "exports": "$",
    "resources": [
      "css/bootstrap.css"
    ]
  },
6
smoore4

コードを追加します。

<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
4
Diogo Santos

バンドル版のBS4を使用すると、次のように機能しました。

ポッパーを削除npm uninstall popper.js

BS4以降への更新npm install bootstrap --save

Jqueryがインストールされていることを確認してくださいnpm install bootstrap --save

`.angular-cli.json 'を編集して、jqueryとバンドルされたBS4を含めます

   "scripts": [
    "../node_modules/jquery/dist/jquery.slim.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
   ],
3
Tim Tharratt

最終的なbootstrap 4.0以下は、bootstrap with popperの動作確認です。

//file; aurelia_project/aurelia.json
"dependencies": [   
    ...
    ... // other dependencies
    ...

   "text",
   "jquery",
   {
     "name": "popper.js",
     "path": "../node_modules/popper.js/dist/umd",
     "main": "popper.min"
   },
   {
     "name": "bootstrap",
     "path": "../node_modules/bootstrap/dist",
     "main": "js/bootstrap.min",
     "deps": ["jquery"],
     "exports": "$",
     "resources": [
       "css/bootstrap.css"
     ]
   },
...
... // remaining dependencies
...
],

これは最新のaureliaで動作します。bootstrap（2018年2月現在）prependメソッドを使用せずに

0
Waku-2