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

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

Bootstrap dropdown require Popper.js

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

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 (который раньше работал с предыдущей Bootstrap 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?

Источник

5 ответов

Решение

Во время просмотра документации 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';

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

Источник

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

window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js').default; // pay attention to "default"
require('bootstrap/dist/js/bootstrap');
Источник

В bootstrap": "^4.1.1" нет необходимости импортировать jquery а также popper.js потому что эти плагины будут уже включены, когда плагины "bootstrap" или bootstrap импортируются по отдельности.

Обратите внимание, что если вы решили импортировать плагины по отдельности, вы также должны установить export-loader

Нет необходимости требовать файлы require('exports-loader?file ... '); как упомянуто здесь, потому что это будет решено автоматически, просто установив $ 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 и должны быть включены вручную, так что вы можете сделать, как показано ниже в компоненте, где вы используете элемент всплывающей подсказки:

<script>
  import $ from 'jquery';

  export default {
    mounted() {
      $('[data-toggle="tooltip"]').tooltip();
    },
  };
</script>
Источник

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

РЕДАКТИРОВАТЬ: я полностью пропустил это в первый раз, но документация на самом деле есть лучший способ решить эту проблему 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",
    ...
  })
  ...
]
Источник

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

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

Источник
Другие вопросы по тегам