popper.js in bootstrap 4 fornisce SyntaxError Esportazione di token imprevista

Ho provato a installare bootstrap 4 e ho incluso i seguenti collegamenti

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

Ma si verifica il seguente errore:

Sintassi non rilevata Errore: esportazione di token imprevista

Qualche idea su come aggiustarlo?

Ho riscontrato lo stesso problema se utilizzo popper.js da una rete CDN come cdnjs.

Se osservi il codice sorgente di Bootstrap 4esempi come ad esempio Navbar puoi vedere che popper.min.jsviene caricato da:

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

L'ho incluso nel mio progetto e l'errore è sparito. Puoi scaricare il codice sorgente da

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

e includi nel tuo progetto come file locale e dovrebbe funzionare.

Ho appena preso anche questo e ho capito perché succede davvero. Nel caso in cui altri se la cavino qui:

Controlla il file readme.md "Usage". La lib è disponibile in tre versioni per tre diversi caricatori di moduli. In breve: se lo carichi con il <script>tag, devi utilizzare la versione UMD . Puoi trovarlo in /dist/umd. Il valore predefinito (in /dist) è ESNext (ECMA-Script) che non può essere caricato utilizzando il scripttag.

Bootstrap 4 richiede la versione UMD di popper.jse assicurati che l'ordine sia il seguente:

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

Puoi anche aggiungere bootstrap.bundle.min.js e rimuovere popper.js nel tuo html.

I file JS in bundle ( bootstrap.bundle.jse minimizzati bootstrap.bundle.min.js) includono [Popper] ( https://popper.js.org/ ), ma non jQuery .

Riga 96 in README

Obiettivi dist

Popper.js viene attualmente fornito con 3 obiettivi in ​​mente: UMD, ESM ed ESNext.

• UMD - Definizione del modulo universale: AMD, RequireJS e globali;
• Moduli ESM - ES: per webpack / rollup o browser che supportano le specifiche;
• ESNext: disponibile in dist/, può essere utilizzato con webpack e babel-preset-env;

Assicurati di utilizzare quello giusto per le tue esigenze. Se vuoi importarlo con un <script>tag, usa UMD.

Hai il seguente codice in Bundle Config bundles.Add (new 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"));

codice seguente nel layout html

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

Questo ha funzionato per me