Bootstrap 4 Beta用Webpack 3.x導入Popper.js拋出Popper不是構造函數

所以Bootstrap 4 Beta已經出來了...... yey！然而Tether已被Popper.js替代爲工具提示（和其他功能）。我看到控制檯足夠快拋出一個錯誤告訴我的變化對Popper.js：Bootstrap 4 Beta用Webpack 3.x導入Popper.js拋出Popper不是構造函數

Bootstrap dropdown require Popper.js

似乎很容易，我去了，更新了我的webpack.config.js（整個配置可以看出here）和Bootstrap然後開始工作（我做的唯一的變化是與波普爾更換特瑟）：

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

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

不過，我現在有一個問題（我沒有帶繫繩有），一個新的錯誤被扔在控制檯：

Uncaught TypeError: Popper is not a constructor

如果我嘗試在Chrome中進行調試，我有Popper加載一個對象（這就是Bootstrap停止抱怨的原因），你可以在下面的打印屏幕中看到。

最後包含我所有的代碼。我使用的引導提示與Aurelia和TypeScript（使用了與以前的引導阿爾法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實現那種方式？

來源

2017-08-12 ghiscoding

在瀏覽Bootstrap 4 documentation。我實際上找到了一個關於Webpack的部分，它解釋瞭如何正確安裝它。繼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';

就萬事大吉了！我們又回到了商業:)

來源

2017-08-12 19:07:44 ghiscoding

真棒！我在3天前在網上尋找它！非常感謝！！！ – LeandroLuk

嘿傢伙！我如何使用aurelia.json做同樣的事情？ –

@JhonatasKleinkauff這裏的問題只針對WebPack，但對於'Aurelia-CLI'，你是否嘗試過沿着前面Tether導入的一行：[aurelia-cli-to-use-with-bootstrap-4]（https： //sackoverflow.com/questions/39432962/how-to-add-tether-in-aurelia-cli-to-use-with-aootlia-cli-to-use-with-bootstrap-4/39461325#39461325） – ghiscoding

我只是碰到了同樣的問題，在這裏描述的解決方案：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", 
    ... 
    }) 
    ... 
]

來源

2017-08-12 10:06:17

您的解決方案一開始並不奏效，最大的原因是我必須從'webpack.config.js'中完全刪除Popper。你能否在你的回答中提及它，以便我能接受它。 – ghiscoding

找到了如何在webpack.config中直接正確地做到這一點，我在運行入門部分瀏覽新的Bootstrap 4文檔時，發現它運氣確實如此。所以我實際上回答了我自己的問題，但仍然贊成你的問題，因爲這幫助我理解了真正的問題。再次感謝。 – ghiscoding

如果您正在使用的WebPack這樣做：

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

來源

2017-08-30 02:00:35

在ASP。淨核心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>

對我來說它的工作。

來源

2017-12-13 21:17:41

Bootstrap 4 Beta用Webpack 3.x導入Popper.js拋出Popper不是構造函數

回答

相關問題