Bootstrap 4 Beta Popper.js mit Webpack Import 3.x wirft Popper ist kein Konstruktor

Question

So Bootstrap 4 Beta ist aus ... yey! Allerdings Tether wurde von Popper.js für Tooltip (und andere Funktionen) ersetzt. Ich sah geworfen einen Fehler in der Konsole schnell genug, um mich über die Änderung zu Popper.js beraten: leicht

Bootstrap dropdown require Popper.js 

scheint genug, ich ging hin und aktualisierte meine webpack.config.js (die gesamte Konfiguration gesehen here werden kann) und Bootstrap dann zu arbeiten begann (die einzige Änderung, die ich tat, war Tether mit Popper zu ersetzen):

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

ich habe auch die import 'bootstrap' in meiner main.ts Datei.

aber ich habe jetzt ein anderes Problem (was ich nicht mit Tether hatte), ein neuer Fehler in der Konsole ausgelöst wird:

Uncaught TypeError: Popper is not a constructor 

Wenn ich versuche, in Chrome zu debuggen, muss ich Popper geladen, wie ein Objekt (weshalb Bootstrap aufhört, sich zu beschweren), wie Sie auf dem Druckbildschirm unten sehen können.

schließlich alle meine Code enthalten. Ich benutze Bootstrap Tooltip mit einem einfachen benutzerdefinierten Elemente gebaut mit Aurelia und TypeScript (der mit früheren Bootstrap alpha zur Arbeit 6 und 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'); 
    } 
} 

Sieht aus wie ich nicht Popper korrekt importiert habe, wenn ja dann, was das Beste ist, Weg, um das mit Webpack 3.x zu erreichen?

Answer 1

zu lösen Während Bootstrap 4 documentation durchsuchen. Ich fand einen Abschnitt über Webpack, das erklärt, wie es richtig zu installieren. Im Anschluss an der Bootstrap - installing with Webpack Dokumentation, die Antwort zu ändern, einfach die webpack.config.js mit dem folgenden:

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

und lassen Sie sich zu import es in den main.ts

import 'bootstrap'; 

und voilà nicht vergessen! Wir sind wieder im Geschäft :)

Answer 2

Ich lief in das gleiche Problem und die Lösung ist hier beschrieben: https://github.com/FezVrasta/popper.js/issues/287

Mein main.ts sieht nun so etwas wie folgt aus:

import "jquery"; 
import Popper from "popper.js"; 

(<any>window).Popper = Popper; 

require("bootstrap"); 

Und ich hatte npm install @types/requirejs --save laufen die bekommen Anruf an require funktioniert.

EDIT: ich diese beim ersten Mal völlig verfehlt, aber die Dokumention hat tatsächlich einen besseren Weg, dies 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 3

Wenn Sie mit Webpack dies tun:

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

Answer 4

In ASP.Netto-Core-2-Projekt die folgenden Skripte der Haupt-HTML-Datei („_Layout.cshtml“ Datei)

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

Für mich hinzufügen, es funktioniert.