popper.js en bootstrap 4 da SyntaxError exportación de token inesperada

98

Intenté instalar bootstrap 4 e incluí los siguientes enlaces

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

Pero ocurre el siguiente error:

Error de sintaxis no detectado: exportación de token inesperada

¿Alguna idea para solucionarlo?

— Павел Шиляев
fuente

No lo sé, el archivo de arranque lo requiere

— Павел Шиляев

no, he usado bootstrap pero nunca me lo pidió

— Ashish sah

1

última versión solicitada

— Павел Шиляев

bueno, si es así, le diré que use enlaces CDN

— Ashish sah

el problema es que se supone que no debo usar enlaces CDN cuando esté disponible en el mercado

— Павел Шиляев

34

Encontré el mismo problema si uso popper.js de la red CDN como cdnjs.

Si observa el código fuente de Bootstrap 4ejemplos como por ejemplo Navbar puede ver que popper.min.jsse carga desde:

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

Incluí eso en mi proyecto y el error desapareció. Puede descargar el código fuente desde

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

e incluirlo en su proyecto como un archivo local y debería funcionar.

— Phani Kumar M
fuente

si. Tienes razón. Copié y pegué ese código y el error desaparece. El CDN no especifica ninguna versión específica depopper.js

— Fabrizio Bertoglio

2

Aunque funciona, creo que esta no es la forma correcta, hasta que el equipo de BootStrap actualice su propio código.

— Nadeem Jamali

8

La URL anterior devuelve un error no encontrado (404). Solía getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js de Bootstrap 4.1.3 y esta resuelto el problema para mí.

— Mike Strother

1

Usar la técnica sugerida en esta respuesta es como perseguir un objetivo en movimiento. Marc y Zim dan la respuesta correcta.

— nagu

lamentablemente esto ya no funciona. El error desapareció, pero la información sobre herramientas es la información

— deanwilliammills

243

También entendí esto y me di cuenta de por qué sucede realmente. En caso de que otros se las arreglen aquí:

Compruebe el "Uso" de readme.md. La biblioteca está disponible en tres versiones para tres cargadores de módulos diferentes. En resumen: si lo carga con la <script>etiqueta, debe usar la versión UMD . Puedes encontrarlo en /dist/umd. El valor predeterminado (en /dist) es ESNext (ECMA-Script) que no se puede cargar con la scriptetiqueta.

— Bagazo
fuente

5

Gracias. Me deshice del error cambiando al archivo umd.

— user1500321

4

Cambiar la referencia al archivo en la carpeta umd resolvió mi problema

— Vimalan Jaya Ganesh

16

Esta debería haber sido una respuesta aceptada. Increíble. Muchas gracias por compartir.

— Ajay Kumar

3

Según lo anterior, esta es la respuesta real.

— Ron

1

Impresionante por la ayuda rápida, gracias. Me preguntaba qué son estas carpetas / umd y / esm, pero Google no da buenos resultados.

— Blackbam

88

Bootstrap 4 requiere la versión UMD de popper.jsy asegúrese de que el orden sea el siguiente:

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

La versión UMD es el único enlace CDN que eliminó el error.

— nyusternie

¡Gracias amigo! Tu pedido solucionó mi problema. ¡Salud!

— Noobie

17

También puede agregar bootstrap.bundle.min.js y eliminar popper.js en su html.

Los archivos JS bootstrap.bundle.jsincluidos ( y minimizados bootstrap.bundle.min.js) incluyen [Popper] ( https://popper.js.org/ ), pero no jQuery .

— webdeveloper086
fuente

2

bootstrap.bundle.min.jsincluidopopperjs

— vuhung3990

la mejor respuesta ya que no requiere el uso de una biblioteca Popper.js adicional en absoluto

— BuddyZ

10

Línea 96 en README

Dist objetivos

Popper.js se envía actualmente con 3 objetivos en mente: UMD, ESM y ESNext.

UMD - Definición de módulo universal: AMD, RequireJS y globales;
Módulos ESM - ES: para webpack / Rollup o navegador compatible con la especificación;
ESNext: Disponible en dist/, se puede utilizar con webpack y babel-preset-env;

Asegúrese de utilizar el adecuado para sus necesidades. Si desea importarlo con una <script>etiqueta, use UMD.

— Robar
fuente

El uso del archivo popper.min.js ubicado en el directorio UMD resolvió mi problema al instalar popper a través de npm. ¡Gracias!

— Kickin_Wing

6

Tiene el siguiente código en 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"));

siguiente código en diseño html

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

Esto funcionó para mi

— ycs
fuente