popper.js in Bootstrap 4 gibt SyntaxError Unexpected Token Export

91

Ich habe versucht, Bootstrap 4 zu installieren, und folgende Links eingefügt

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

Der folgende Fehler tritt jedoch auf:

Nicht erfasste SyntaxError: Unerwarteter Token-Export

Geben Sie hier die Bildbeschreibung ein

Irgendwelche Ideen, wie man das Problem behebt?

Павел Шиляев
quelle
Ich weiß nicht, Bootstrap-Datei erfordert es
Павел Шиляев
Nein, ich habe Bootstrap verwendet, aber es hat mich nie gefragt
Ashish sah
1
letzte Version gefragt
Павел Шиляев
Nun, wenn es so ist, dann werde ich sagen, CDN-Links zu verwenden
Ashish sah
Das Problem ist, dass ich keine CDN-Links verwenden soll, wenn es auf dem Markt laut ist
28авел Шиляев

Antworten:

32

Ich habe das gleiche Problem festgestellt, wenn ich popper.js aus dem CDN-Netzwerk wie verwende cdnjs.

Wenn Sie den Quellcode von Bootstrap 4Beispielen wie zum Beispiel Navbar beachten , können Sie sehen, dass dieser popper.min.jsgeladen wird von:

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

Ich habe das in mein Projekt aufgenommen und der Fehler ist weg. Sie können den Quellcode von herunterladen

https://getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js

und in Ihr Projekt als lokale Datei aufnehmen und es sollte funktionieren.

Phani Kumar M.
quelle
Ja. Du hast recht. Ich habe diesen Code kopiert und eingefügt und der Fehler verschwindet. Das CDN spezifiziert keine spezifische Version vonpopper.js
Fabrizio Bertoglio
2
Obwohl es funktioniert, denke ich, dass dies nicht der richtige Weg ist, bis das BootStrap-Team seinen eigenen Code aktualisiert.
Nadeem Jamali
8
Die obige URL gibt einen nicht gefundenen Fehler zurück (404). Ich habe getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js für Bootstrap 4.1.3 verwendet, wodurch das Problem für mich behoben wurde.
Mike Strother
1
Die Verwendung der in dieser Antwort vorgeschlagenen Technik ist wie die Verfolgung eines sich bewegenden Ziels. Die richtige Antwort geben Marc und Zim.
Nagu
das funktioniert leider nicht mehr. Der Fehler ist weg, aber der Tooltip ist der Standard-HTML-Tooltip
Deanwilliammills
230

Habe das auch bekommen und herausgefunden, warum es wirklich passiert. Für den Fall, dass andere hier durchkommen:

Überprüfen Sie die readme.md "Verwendung". Die lib ist in drei Versionen für drei verschiedene Modullader verfügbar. Kurz gesagt: Wenn Sie es mit dem <script>Tag laden, müssen Sie die UMD- Version verwenden. Sie finden es in /dist/umd. Der Standardwert (in /dist) ist der ESNext (ECMA-Script), der nicht mit dem scriptTag geladen werden kann .

Marc
quelle
5
Danke dir. Ich habe den Fehler für mich beseitigt, indem ich zur umd-Datei gewechselt habe.
user1500321
4
Das Ändern des Verweises auf die Datei unter umd Ordner löste mein Problem
Vimalan Jaya Ganesh
15
Diese Antwort sollte akzeptiert worden sein. Genial. Vielen Dank für das Teilen.
Ajay Kumar
2
Wie oben, ist dies die wahre Antwort.
Ron
1
Super für die schnelle Hilfe, danke. Ich habe mich gefragt, was diese Ordner / umd und / esm sind, aber Google liefert keine guten Ergebnisse.
Blackbam
84

Bootstrap 4 erfordert die UMD-Version von popper.jsund stellen Sie sicher, dass die Reihenfolge wie folgt lautet:

<!-- 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>
Zim
quelle
Die UMD-Version ist die einzige CDN-Verbindung, die den Fehler behoben hat.
Nyusternie
Danke Kumpel! Ihre Bestellung hat mein Problem behoben. Prost!
Noobie
12

Sie können auch bootstrap.bundle.min.js hinzufügen und popper.js in Ihrem HTML-Code entfernen.

Gebündelte ( bootstrap.bundle.jsund minimierte bootstrap.bundle.min.js) JS-Dateien enthalten [Popper] ( https://popper.js.org/ ), jedoch nicht jQuery .

webdeveloper086
quelle
2
bootstrap.bundle.min.jsenthaltenpopperjs
vuhung3990
Beste Antwort, da keine zusätzliche Popper.js-Bibliothek benötigt wird
BuddyZ
9

Zeile 96 in README

Dist Ziele

Popper.js wird derzeit mit drei Zielen ausgeliefert: UMD, ESM und ESNext.

  • UMD - Universal Module Definition: AMD, RequireJS und Globals;
  • ESM - ES - Module: Für Webpack / Rollup oder Browser, die die Spezifikation unterstützen;
  • ESNext: Verfügbar in dist/, kann mit Webpack verwendet werden und babel-preset-env;

Stellen Sie sicher, dass Sie das richtige für Ihre Bedürfnisse verwenden. Wenn Sie es mit einem <script>Tag importieren möchten , verwenden Sie UMD.

rauben
quelle
Durch die Verwendung der Datei popper.min.js im UMD-Verzeichnis wurde mein Problem bei der Installation von popper über npm behoben. Danke dir!
Kickin_Wing
6

Sie haben folgenden Code in Bundle Config bundles.Add (neues 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"));

folgenden Code in Layout-HTML

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

Das hat bei mir funktioniert

ycs
quelle