popper.js dans bootstrap 4 donne à SyntaxError une exportation de jeton inattendue

Question

J'ai essayé d'installer bootstrap 4 et j'ai inclus les liens suivants

 <script src="libs/jquery/dist/jquery.min.js"></script>
<script src="libs/tether/dist/js/tether.min.js" ></script>
<script src="libs/popper.js/dist/popper.js"></script>
<script src="libs/bootstrap/dist/js/bootstrap.min.js" ></script>
 

Mais l'erreur suivante se produit:

Uncaught syntaxError: exportation de jeton inattendue

Des idées comment résoudre ce problème?

Answer 1

Je viens tout juste de savoir cela et j'ai compris pourquoi cela se produisait vraiment. Au cas où d'autres passeraient par ici:

Vérifiez le readme.md "Usage". La lib est disponible en trois versions pour trois chargeurs de modules différents. En bref: si vous le chargez avec la balise <script> vous devez utiliser la version UMD . Vous pouvez le trouver en /dist/umd . La valeur par défaut (en /dist ) est l' ESNext (script ECMA) qui ne peut pas être chargé à l'aide de la balise script .

Answer 2

Bootstrap 4 nécessite la version UMD de popper.js et assurez-vous que la commande est la suivante:

 <!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="~/Scripts/jquery-3.0.0.min.js"></script>
<script src="~/Scripts/umd/popper.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
 

Answer 3

J'ai rencontré le même problème si j'utilise popper.js de réseau CDN comme cdnjs.

Si vous observez le code source de l' Bootstrap 4 exemples comme par exemple la barre de navigation , vous pouvez voir qu' popper.min.js est chargé de:

<script src="https://getbootstrap.com/assets/js/vendor/popper.min.js"></script>

J'ai compris que dans mon projet, et l'erreur a disparu. Vous pouvez télécharger le code source à partir d' https://getbootstrap.com/assets/js/vendor/popper.min.js et à inclure dans votre projet en tant que fichier local et cela devrait fonctionner.

Answer 4

Vous pouvez également ajouter bootstrap.bundle.min.js et supprimer popper.js dans votre code HTML.

Les fichiers JS fournis ( bootstrap.bundle.js et minified bootstrap.bundle.min.js ) incluent [Popper] ( https://popper.js.org/ ), mais pas jQuery .

Answer 5

Vous avez le code suivant dans Bundle Config bundles.Add (nouveau ScriptBundle ("~ / bundles / jquery"). Include ("~ / Scripts / jquery- {version} .js"));

         bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

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

code suivant en layout html

 @Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
 

Cela a fonctionné pour moi