wake-up-neo.com

Bootstrap 4 Beta beim Importieren von Popper.js mit Webpack 3.x wirft Popper ist kein Konstruktor

Also Bootstrap 4 Beta ist raus ... yey! Tether wurde jedoch durch Popper.js für Tooltip (und andere Funktionen) ersetzt. Ich habe einen Fehler in der Konsole gesehen, der schnell genug war, um mich auf die Änderung von Popper.js hinzuweisen:

Bootstrap dropdown require Popper.js

Anscheinend ist es einfach genug, ich habe meinen webpack.config.js (die gesamte Konfiguration ist hier zu sehen) aktualisiert und Bootstrap hat dann funktioniert (die einzige Änderung, die ich gemacht habe, war, Tether durch Popper zu ersetzen):

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

Ich habe auch den import 'bootstrap' in meiner main.ts-Datei erstellt. 

Allerdings habe ich jetzt ein anderes Problem (was ich nicht mit Tether hatte), ein neuer Fehler wird in die Konsole geworfen:

Uncaught TypeError: Popper is not a constructor

Wenn ich versuche, in Chrome zu debuggen, habe ich Popper als Objekt geladen (weshalb Bootstrap sich nicht mehr beschwert), wie Sie im Druckbildschirm unten sehen können. enter image description here

Zum Schluss meinen gesamten Code einbinden. Ich benutze Bootstrap-Tooltip mit einem einfachen benutzerdefinierten Element, das mit Aurelia und TypeScript erstellt wurde (das früher mit Bootstrap alpha 6 und Tether verwendet wurde).

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, als hätte ich Popper nicht korrekt importiert. Wenn ja, was ist der beste Weg, dies mit Webpack 3.x zu erreichen?

javascripttwitter-bootstrapwebpackaureliabootstrap-4
14
ghiscoding

Beim Durchsuchen von Bootstrap 4-Dokumentation . Ich habe tatsächlich einen Abschnitt über Webpack gefunden, in dem erklärt wird, wie er korrekt installiert wird. Nach der Bootstrap - Installation mit Webpack Dokumentation lautet die Antwort, einfach den webpack.config.js mit folgendem zu ändern:

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

und vergessen wir nicht, import es im main.ts

import 'bootstrap';

und voilà! Wir sind zurück im Geschäft :)

31
ghiscoding

Wenn Sie Webpack verwenden, machen Sie folgendes:

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

Ich bin gerade auf dasselbe Problem gestoßen und die Lösung ist hier beschrieben: https://github.com/FezVrasta/popper.js/issues/287

Mein main.ts sieht nun ungefähr so ​​aus:

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

(<any>window).Popper = Popper;

require("bootstrap");

Und ich musste npm install @types/requirejs --save laufen lassen, damit der Aufruf von require funktioniert.

BEARBEITEN: Ich habe das beim ersten Mal total verpasst, aber die Dokumentation hat tatsächlich eine bessere Lösung, um dieses Problem zu lösen 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",
    ...
  })
  ...
]
3
Phil Cox

In bootstrap": "^4.1.1" müssen keine jquery und popper.js importiert werden, da diese Plugins bereits enthalten sind, wenn Bootstrap- oder Bootstrap-Plugins einzeln importiert werden.

Beachten Sie, wenn Sie Plugins einzeln importieren möchten, müssen Sie auch Exporte-Loader installieren

Es ist keine Notwendigkeit erforderlich, Dateien require('exports-loader?file ... '); wie erwähnt hier zu benötigen, da dies automatisch durch die Installation von $ npm install exports-loader --save-dev erledigt wird.

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

Es ist nicht notwendig, etwas wie folgt zu tun:

const webpack = require('webpack');

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

Ich bin ein vue.js-Entwickler, und im neuen vue-cli-3 erstellen wir vue.config.js in root und platzieren den Code wie oben, um ein neues Plugin zu registrieren. Wie gesagt, es besteht keine Notwendigkeit, all dies in bootstrap": "^4.1.1" zu tun.

Das Tooltip-Plugin von Bootstrap ist von popper.js abhängig und muss manuell aktiviert werden. Sie können dies wie folgt in der Komponente tun, in der Sie das Tooltip-Element verwenden:

<script>
  import $ from 'jquery';

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

Fügen Sie im ASP.net Core 2-Projekt der HTML-Hauptdatei ("_Layout.cshtml" -Datei) die folgenden Skripts hinzu.

<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 funktioniert es.

0
Motti Kadosh