web-dev-qa-db-fra.com

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

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

enter image description here

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

javascripttwitter-bootstrapbootstrap-4popper.js
54
Павел Шиляев

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

Si vous observez le code source de Bootstrap 4 exemples, comme par exemple Navbar , vous pouvez voir que popper.min.js est chargé à partir de:

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

J'ai inclus cela dans mon projet et l'erreur a disparu. Vous pouvez télécharger le code source à partir de https://getbootstrap.com/assets/js/vendor/popper.min.js et l'inclure dans votre projet sous forme de fichier local.

18
Phani Kumar M

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 dans /dist/umd. La valeur par défaut (dans /dist) est le ESNext (ECMA-Script) qui ne peut pas être chargé à l'aide de la balise script.

135
Marc

Bootstrap 4 nécessite la version UMD de popper.js, et assurez-vous que l'ordre est le suivant:

<!-- 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>
56
Zim

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 .

5
webdeveloper086

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

4
ycs