Bootstrap 4 Beta importing Popper.js with Webpack 3.x throws Popper is not a constructor

Question

所以 Bootstrap 4 Beta 出局了……是的！但是，对于工具提示（和其他功能），Tether 已被 Popper.js 取代。我看到控制台中抛出的错误足够快，可以建议我更改 Popper.js:

Bootstrap dropdown require Popper.js

看起来很简单，我去更新了我的webpack.config.js（可以看到整个配置here）和Bootstrap然后开始工作（我做的唯一改变是更换带 Popper 的绳索）：

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

我也在 main.ts 文件中做了 import 'bootstrap'。

但是我现在遇到了另一个问题（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 实现该效果的最佳方法是什么？

Answer 1

我刚运行遇到了同样的问题，这里描述了解决方案：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",
    ...
  })
  ...
]

Answer 2

浏览 Bootstrap 4 documentation. I actually found a section about Webpack which explains how to install it correctly. Following the Bootstrap - installing with Webpack 文档时，答案是简单地修改 webpack.config.js 如下：

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

我们不要忘记 import 它在 main.ts

import 'bootstrap';

瞧！我们恢复营业了:)

Answer 3

如果您使用的是 Webpack，请执行以下操作：

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

Answer 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>

对我来说很管用。

Answer 5

在 bootstrap": "^4.1.1" 中不需要导入 jquery 和 popper.js 因为当单独导入 'bootstrap' 或 bootstrap 的插件时这些插件已经包含在内.

Notice that if you chose to import plugins individually, you must also install exports-loader

不需要像 here 提到的那样要求文件 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的tooltip插件依赖于popper.js，需要手动启用，所以你可以在使用tooltip元素的组件中进行如下操作：

<script>
  import $ from 'jquery';

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

Bootstrap 4 Beta importing Popper.js with Webpack 3.x throws Popper is not a constructor

Bootstrap 4 Beta importing Popper.js with Webpack 3.x throws Popper is not a constructor

javascript

twitter-bootstrap

webpack

aurelia

bootstrap-4