Bootstrap 4 Бета-импорт Popper.js с помощью Webpack 3.x throws Popper не является конструктором

Итак, Bootstrap 4 Beta выходит... yey! Однако Tether был заменен на Popper.js для всплывающей подсказки (и других функций). Я достаточно быстро обнаружил ошибку в консоли, чтобы сообщить мне об изменении на Popper.js:

Bootstrap dropdown require Popper.js

Кажется, достаточно легко, я пошел и обновил мой webpack.config.js (весь конфиг можно увидеть здесь), и Bootstrap затем начал работать ( только изменение я сделал, чтобы заменить Tether с Поппера):

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 перестает жаловаться), как вы можете видеть на экране печати ниже.

Наконец, чтобы включить весь мой код. Я использую всплывающую подсказку Bootstrap с простым пользовательским элементом, созданным с помощью Aurelia и TypeScript (который использовался для работы с предыдущим бутстрапом alpha 6 и Tether)

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?

Ответ 1

При просмотре документации Bootstrap 4. Я действительно нашел раздел о Webpack, в котором объясняется, как правильно установить его. Следуя документации Bootstrap - установка с помощью Webpack, нужно просто изменить webpack.config.js следующим образом:

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

и не забывайте import его в main.ts

import 'bootstrap';

и вуаля! Мы вернулись в бизнес:)

Ответ 2

Я просто столкнулся с той же проблемой, и решение описано здесь: 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 --save, чтобы вызвать вызов require.

EDIT: я полностью пропустил это в первый раз, но в документе действительно есть лучший способ решить эту проблему 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

Если вы используете Webpack Сделайте это:

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

Ответ 4

В проекте 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>

Для меня это работает.