popper.js in Bootstrap 4 gibt SyntaxError Unexpected Token Export

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

Irgendwelche Ideen, wie man das Problem behebt?

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.

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 .

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>

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 .

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.

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