Bootstrap 4 Beta 使用 Webpack 3.x 导入 Popper.js 抛出 Popper 不是构造函数 [英] Bootstrap 4 Beta importing Popper.js with Webpack 3.x throws Popper is not a constructor

问题描述

所以Bootstrap 4 Beta 出来了......是的！然而，Tether 已被 Popper.js 替换为工具提示(和其他功能).我看到控制台中抛出的错误足够快，以告知我对 Popper.js 的更改:

Bootstrap 下拉菜单需要 Popper.js

看起来很简单，我去更新了我的 webpack.config.js(整个配置可以看到

最后包含我所有的代码.我将 Bootstrap 工具提示与一个用 Aurelia 和 TypeScript 构建的简单自定义元素一起使用(它曾经与以前的 Bootstrap alpha 6 和 Tether 一起使用)

import {inject, customAttribute} from 'aurelia-framework';import * as $ from 'jquery';@customAttribute('引导工具提示')@inject(元素)导出类 BootstrapTooltip {元素:HTMLElement；构造函数(元素:HTMLElement){this.element = 元素;}绑定(){$(this.element).tooltip();}解除绑定(){$(this.element).tooltip('dispose');}}

看起来我没有正确导入 Popper，如果是这样，那么使用 Webpack 3.x 实现这一目标的最佳方法是什么?

解决方案

在浏览 Bootstrap 4 文档时.我实际上找到了一个关于 Webpack 的部分，它解释了如何正确安装它.按照 Bootstrap - 使用 Webpack 安装 文档，答案是简单地修改webpack.config.js 包含以下内容:

插件:[//...新的 webpack.ProvidePlugin({$: 'jquery',jQuery: 'jquery','window.jQuery': 'jquery',波普尔:['popper.js'，'默认']})//...]

我们不要忘记在main.ts

中import

import 'bootstrap';

瞧！我们恢复营业了:)

So Bootstrap 4 Beta is out... yey! However Tether has been replaced by Popper.js for tooltip (and other features). I saw an error thrown in the console fast enough to advise me of the change to Popper.js:

Bootstrap dropdown require Popper.js

Seems easy enough, I went and updated my webpack.config.js (the entire config can be seen here) and Bootstrap then started working (the only change I did was to replace Tether with Popper):

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

I also did the import 'bootstrap' in my main.ts file.

However I now have another problem (which I did not have with Tether), a new error is thrown in the console:

Uncaught TypeError: Popper is not a constructor

If I try to debug in Chrome, I do have Popper loaded as an Object (which is why Bootstrap stopped complaining) as you can see in the print screen below.

Finally to include all my code. I use Bootstrap tooltip with a simple custom element built with Aurelia and TypeScript (which used to work with previous Bootstrap alpha 6 and 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');
  }
}

Looks like I did not import Popper correctly, if so then what is the best way to achieve that with Webpack 3.x?

解决方案

While browsing Bootstrap 4 documentation. I actually found a section about Webpack which explains how to install it correctly. Following the Bootstrap - installing with Webpack documentation, the answer is to simply modify the webpack.config.js with the following:

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

and let's not forget to import it in the main.ts

import 'bootstrap';

and voilà! We are back in business :)

这篇关于Bootstrap 4 Beta 使用 Webpack 3.x 导入 Popper.js 抛出 Popper 不是构造函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！