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

ingrese la descripción de la imagen aquí

¿Alguna idea para solucionarlo?

javascript twitter-bootstrap bootstrap-4 popper.js Павел Шиляев
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
Павел Шиляев

Respuestas:

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