web-dev-qa-db-fra.com

Comment utiliser Popper.js avec Bootstrap 4 beta

Je suis vieille école, j'ai donc téléchargé le code source dans la version 1.12.0, puis j'ai procédé comme suit:

<script src="/popper.js-1.12.0/dist/popper.js"></script>
<script src="/bootstrap-4.0.0-beta/dist/js/bootstrap.js"></script>

Mais j'obtiens:

Uncaught SyntaxError: Unexpected token export

sur la ligne 2294 où il est dit:

export default Popper;
bootstrap-4popper.js
59
Phillip Senn

Vous souhaitez utiliser la cible dist spécifiée dans le fichier _package.json_ en tant que main entry .

Dans ce cas, vous recherchez la version umd ( dist/umd/popper.js )

Qu'est-ce que l'UMD?

Le modèle UMD tente généralement d’offrir une compatibilité avec les chargeurs de script les plus populaires du jour (par exemple RequireJS, entre autres). Dans de nombreux cas, il utilise AMD comme base, avec un boîtier spécial ajouté pour gérer la compatibilité CommonJS.

Cela signifie qu'un ensemble UMD peut être chargé via la balise _<script>_ et être injecté dans la portée globale (window), mais peut également fonctionner avec un chargeur CommonJS tel que RequireJS.

102
Fez Vrasta

Popper nécessite que vous utilisiez le fichier sous le chemin umd avec Bootstrap 4.

L'une ou l'autre de ces versions CDN fonctionnera:

https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.jshttps://cdnjs.cloudflare.com/ajax/ libs/popper.js/1.12.5/umd/popper.min.js

D'autres réponses/commentaires mentionnent la version, , mais le problème n'est pas lié à la gestion des versions .

Ce n'est jamais une mauvaise pratique d'utiliser l'exemple de Bootstrap consistant à inclure popper car cela devrait toujours fonctionner. Bootstrap 4 recommande désormais le popper 1.11, qui est un choix sûr, mais la version 1.12.5 devrait également fonctionner correctement.

Note latérale: Pourquoi cette confusion avec les fichiers umd, esm et plain ol 'popper? L’intention est d’emballer des modules flexibles, mais en réalité, cela pourrait être simplifié. Cet article explique certains problèmes liés aux nouveaux types de modules.

20
whitneyland

Assurez-vous que vous utilisez la version Popper.js référencée dans les documents Bootstrap.

https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js

12
Zim

Selon le popper docs :

Popper.js est actuellement livré avec 3 objectifs en tête: UMD, ESM et ESNext.

UMD - Universal Module Définition: AMD, RequireJS et globals;

Modules ESM - ES: pour WebPack/Rollup ou navigateur prenant en charge la spécification;

ESNext: disponible dans dist /, peut être utilisé avec webpack et babel-preset-env; Assurez-vous d'utiliser le bon pour vos besoins. Si vous souhaitez l'importer avec une balise, utilisez UMD.

6
Shivam

Il suffit d'utiliser la version bundle de bootstrap et votre bien!

<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<!-- <script src="./node_modules/popper.js/dist/popper.min.js"></script> -->
<!-- <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script> -->
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
1
Valmor Nascimento

J'ai eu le même problème. J'ai essayé différentes approches, mais celle-ci a fonctionné pour moi. Lisez les instructions de http://getbootstrap.com/ .

Copiez les liens CDN (jQuery, Popper et Bootstrap) dans le même ordre (il est important) que celui indiqué.

Bootstrap CDN links

<head>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</head>
1
MrGreen

Selon Fez Vrasta.

Si vous récupérez popper via NuGet Package Manager dans Visual Studio, assurez-vous que le chemin de référence du script popper.js utilise le dossier md:

Exemple MVC ASP.Net BundleConfig:

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/umd/popper.js", //path with umd
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js"));

Exemple de référence de script direct:

<script src="~/Scripts/umd/popper.js" type="text/javascript"></script>
1
Kellie

Conteneurs séparés:

Si vous avez suivi la réponse acceptée et que vos info-bulles se trouvent toujours au mauvais endroit, il se peut que vous ayez un conteneur différent pour chaque info-bulle. .

J'essayerais ceci pour permettre à l'info-bulle d'être placée près du parent de l'élément :

const initializeTooltips = function () {
    $('[data-toggle="tooltip"]').each(function() {
        $(this).tooltip({container: $(this).parent()});
    });
};
$(document).ready(function () {
    initializeTooltips();
});

Essayez vous-même sur jsfiddle .

0
Daniel Schetritt