web-dev-qa-db-fra.com

Bootstrap 4 Bêta importer Popper.js avec Webpack 3.x et Popper n'est pas un constructeur

Donc, Bootstrap 4 Beta est sorti ... oui! Cependant, Tether a été remplacé par Popper.js pour les info-bulles (et autres fonctionnalités). J'ai vu une erreur dans la console assez rapidement pour m'avertir du changement de Popper.js:

Bootstrap dropdown require Popper.js

Cela semble assez facile, je suis allé et mis à jour mon webpack.config.js (la configuration entière peut être vue ici ) et Bootstrap a alors commencé à fonctionner (le seul changement que j'ai fait était de remplacer Tether par Popper):

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

J'ai aussi fait le import 'bootstrap' dans mon fichier main.ts. 

Cependant, j'ai maintenant un autre problème (que je n'avais pas avec Tether), une nouvelle erreur est levée dans la console:

Uncaught TypeError: Popper is not a constructor

Si j'essaie de déboguer dans Chrome, j'ai Popper chargé en tant qu'objet (c'est pourquoi Bootstrap a cessé de se plaindre), comme vous pouvez le voir sur l'écran d'impression ci-dessous.  enter image description here

Enfin pour inclure tout mon code. J'utilise l'info-bulle Bootstrap avec un élément personnalisé simple construit avec Aurelia et TypeScript (qui fonctionnait avec les versions précédentes de Bootstrap alpha 6 et 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');
  }
}

On dirait que je n'ai pas importé Popper correctement, si tel est le cas, quel est le meilleur moyen d'y parvenir avec Webpack 3.x?

javascripttwitter-bootstrapwebpackaureliabootstrap-4
14
ghiscoding

Pendant la navigation Documentation Bootstrap 4 . J'ai en fait trouvé une section sur Webpack qui explique comment l'installer correctement. Après le Bootstrap - installation avec Webpack documentation, la solution consiste simplement à modifier le webpack.config.js en procédant comme suit:

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

et n'oublions pas de import dans le main.ts

import 'bootstrap';

et voilà! Nous sommes de retour dans les affaires :)

31
ghiscoding

Si vous utilisez Webpack, procédez comme suit:

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

Je viens de rencontrer le même problème, et la solution est décrite ici: https://github.com/FezVrasta/popper.js/issues/287

Mon main.ts ressemble maintenant à quelque chose comme ce qui suit:

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

(<any>window).Popper = Popper;

require("bootstrap");

Et je devais exécuter npm install @types/requirejs --save pour que l'appel à require fonctionne.

EDIT: Je l’ai totalement ratée la première fois, mais la documentation contient en fait un meilleur moyen de résoudre ce problème 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

Dans bootstrap": "^4.1.1" il n'est pas nécessaire d'importer jquery et popper.js car ces plug-ins seront déjà inclus lors de l'importation individuelle des plug-ins 'bootstrap' ou de bootstrap.

Notez que si vous avez choisi d'importer des plugins individuellement, vous devez également installer exports-loader

Pas besoin de requérir les fichiers require('exports-loader?file ... '); comme mentionné ici car cela sera pris en charge automatiquement en installant simplement $ 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';

Il n'y a pas besoin de faire quelque chose comme ci-dessous:

const webpack = require('webpack');

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

Je suis un développeur vue.js et dans le nouveau vue-cli-3, nous créons vue.config.js à la racine et placez le code comme ci-dessus pour enregistrer un nouveau plugin, mais comme indiqué, il n'est pas nécessaire de faire tout cela dans bootstrap": "^4.1.1".

Le plugin tooltip de Bootstrap dépend de popper.js et doit être activé manuellement. Vous pouvez donc faire comme ci-dessous dans le composant où vous utilisez un élément d'infobulle:

<script>
  import $ from 'jquery';

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

Dans le projet ASP.net Core 2, ajoutez les scripts suivants au fichier HTML principal (fichier "_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>

Pour moi ça marche.

0
Motti Kadosh