web-dev-qa-db-ja.com

Bootstrap 4 Webpack 3.xでPopper.jsをインポートすると、Popperはコンストラクタではありません

Bootstrap 4 Betaが出ています...ただし、ツールチップ（およびその他の機能）のTetherはPopper.jsに置き換えられました。 Popper.jsへの変更を通知するのに十分な速さでコンソールにエラーがスローされるのを見ました。

Bootstrap dropdown require Popper.js

簡単だと思うので、webpack.config.js（設定全体を見ることができます ここ ）とBootstrapが動作し始めました（私が行った唯一の変更）テザーをポッパーに置き換えることでした）：

plugins: [
new ProvidePlugin({
  'Promise': 'bluebird',
  '$': 'jquery',
  'jQuery': 'jquery',
  'window.jQuery': 'jquery',
  'window.$': 'jquery',
  Popper: 'popper.js' 
}),

import 'bootstrap'ファイルでmain.tsも実行しました。

ただし、別の問題が発生しました（Tetherでは発生しませんでした）。コンソールに新しいエラーがスローされます。

Uncaught TypeError: Popper is not a constructor

Chromeでデバッグしようとすると、以下の印刷画面でわかるように、Popperがオブジェクトとしてロードされています（Bootstrap文句を言うのをやめた理由）。 enter image description here

最後に、すべてのコードを含めます。私はBootstrapツールチップをAureliaとTypeScript（以前のBootstrapアルファ6およびテザー）

import {inject, customAttribute} from 'aurelia-framework';
import * as $ from 'jquery';

@customAttribute('bootstrap-tooltip')
@inject(Element)
export class BootstrapTooltip {
  element: HTMLElement;

  constructor(element: HTMLElement) {
    this.element = element;
  }

  bind() {
    $(this.element).tooltip();
  }

  unbind() {
    $(this.element).tooltip('dispose');
  }
}

Popperを正しくインポートしなかったようですが、そうであれば、Webpack 3.xでそれを達成する最良の方法は何ですか？

javascripttwitter-bootstrapwebpackaureliabootstrap-4
15
ghiscoding

閲覧中 Bootstrap 4ドキュメント 。実際に、Webpackに関するセクションを見つけて、正しくインストールする方法を説明しています。 ブートストラップ-Webpackでのインストール のドキュメントに従って、答えはwebpack.config.js次を含む：

plugins: [
  // ...
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default']
  })
  // ...
]

importを忘れないようにmain.ts

import 'bootstrap';

そしてほら！私たちはビジネスに戻りました:)

32
ghiscoding

Webpackを使用している場合これを行います。

window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js').default; // pay attention to "default"
require('bootstrap/dist/js/bootstrap');
6
Hassan Azimi

私はちょうど同じ問題に遭遇しました、そして解決策はここに記述されています： https://github.com/FezVrasta/popper.js/issues/287

僕の main.tsは次のようになります。

import "jquery";
import Popper from "popper.js";

(<any>window).Popper = Popper;

require("bootstrap");

そして、私はnpm install @types/requirejs --saverequireへの呼び出しを取得します。

編集：私はこれを初めて見逃しましたが、ドキュメントには実際にこれを解決するためのより良い方法があります https://getbootstrap.com/docs/4.0/getting-started/webpack/

plugins: [
  ...
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default'],
    // In case you imported plugins individually, you must also require them here:
    Util: "exports-loader?Util!bootstrap/js/dist/util",
    Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
    ...
  })
  ...
]
3
Phil Cox

bootstrap": "^4.1.1"では、jqueryおよびpopper.jsをインポートする必要はありません。これらのプラグインは、「ブートストラップ」またはブートストラップのプラグインが個別にインポートされるときにすでに含まれているためです。

注意プラグインを個別にインポートすることを選択した場合は、exports-loaderもインストールする必要があります

前述のようにファイルrequire('exports-loader?file ... ');を必要とする必要はありません here これは$ npm install exports-loader --save-devをインストールするだけで自動的に処理されるためです

import 'bootstrap'; // Import all plugins at once

//
// Or, import plugins individually
//
// import 'bootstrap/js/src/alert';
// import 'bootstrap/js/src/button';
// import 'bootstrap/js/src/carousel';
// import 'bootstrap/js/src/collapse';
// import 'bootstrap/js/src/dropdown';
// import 'bootstrap/js/src/modal';
// import 'bootstrap/js/src/popover';
// import 'bootstrap/js/src/scrollspy';
// import 'bootstrap/js/src/tab';
// import 'bootstrap/js/src/tooltip';
// import 'bootstrap/js/src/util';

以下のようなことをする必要はありません。

const webpack = require('webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default']
      })
    ]
  }
}

私はvue.js開発者であり、新しいvue-cli-3で、ルートにvue.config.jsを作成し、新しいプラグインを登録するために上記のようなコードを配置しますが、bootstrap": "^4.1.1"でこれをすべて行う必要はありません。

Bootstrapのツールチッププラグインはpopper.jsに依存しており、手動で有効にする必要があるため、tooltip要素を使用するコンポーネントで次のようにすることができます。

<script>
  import $ from 'jquery';

  export default {
    mounted() {
      $('[data-toggle="tooltip"]').tooltip();
    },
  };
</script>
2
Syed

ASP.net Core 2プロジェクトで、メインHTMLファイル（ "_Layout.cshtml"ファイル）に次のスクリプトを追加します

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/js/popper.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>

私にとってはうまくいっています。

0
HolyM