Yo soy de la vieja escuela, por lo que he descargado el código fuente para 1.12.0 y, a continuación, hizo lo siguiente:

<script src="/popper.js-1.12.0/dist/popper.js"></script>
<script src="/bootstrap-4.0.0-beta/dist/js/bootstrap.js"></script>

Pero estoy consiguiendo:

Uncaught SyntaxError: Unexpected token export

en línea 2294 donde dice:

export default Popper;
InformationsquelleAutor Phillip Senn | 2017-08-15

8 Comentarios

  1. 100

    Desea utilizar el dist de destino especificado en el el paquete.json archivo como principal entrada.

    En este caso, usted está buscando para la umd construir (dist/umd/popper.js)

    Lo del UMD?

    La UMD patrón trata de ofrecer compatibilidad con los más populares de secuencia de comandos de cargadores del día (e.g RequireJS, entre otros). En muchos casos se utiliza AMD como base, con especial carcasa añadido para manejar CommonJS de compatibilidad.

    Esto significa que un UMD paquete puede ser cargado a través de <script> etiqueta y obtener inyectado dentro del ámbito global (window), pero también de trabajo si es necesario, con un CommonJS cargador como RequireJS.

    • Wow, he leído esta respuesta 3 veces, y no tengo idea de lo que significa o cómo resolver el mismo error. Alguien tiene alguna solución concreta para corregir?
  2. 20

    Popper requiere que se utilice el archivo bajo el umd ruta con Bootstrap 4.

    Cualquiera de estos CDN versiones de trabajo:

    https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.js
    https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.min.js

    Otras respuestas/comentarios mencionar la versión, sin embargo, el problema no está relacionado con el control de versiones de.

    Nunca es una mala práctica para el uso de Bootstrap del ejemplo de la inclusión de popper porque siempre debería funcionar. Bootstrap 4 a partir de ahora recomienda popper 1.11 que es una elección segura, sin embargo la versión 1.12.5 debería funcionar bien así.

    Nota al margen: ¿por Qué la confusión con umd, esm, y la llanura ol’ popper archivos? La intención es flexible módulo de embalaje, pero en realidad podría ser más sencillo. Este post explica algunos de los problemas con los nuevos tipos de módulos.

    • con SRI: <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha256-98vAGjEDGN79TjHkYWVD4s87rvWkdWLHPs5MC3FvFX4=" crossorigin="anonymous"></script>
  3. 12

    Asegúrese de utilizar el Popper.js la versión que se hace referencia en el Bootstrap docs.

    https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js

    • Yo uso popper 1.12.x y error «SyntaxError: declaraciones de exportación sólo puede aparecer en el nivel superior de un módulo». Cambiar a 1.11.0 y funciona. Gracias 🙂
    • No creo que sea la versión que importa, es el «umd» parte de la url que se perdió cuando simplemente la copia de la etiqueta de script a partir de cdnjs. https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.4/umd/popper.min.js obras, https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.4/popper.min.js no.
  4. 6

    Como por la popper docs:

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

    UMD – Universal de Definición de Módulo: AMD, RequireJS y globales;

    ESM – ES Módulos: Para webpack/paquete Acumulativo de actualizaciones o navegador de apoyo a la especificación;

    ESNext: Disponible en dist/, puede ser utilizado con webpack y
    babel-preset-env; asegúrese de utilizar el más adecuado para sus necesidades. Si
    desea importar con una etiqueta, utilice UMD.

  5. 1

    Yo tenía el mismo problema. Trató de enfoques diferentes, pero esto funcionó para mí.
    Lea la instrucción de la http://getbootstrap.com/.

    Copia de la CDN enlaces (jQuery, Popper y Bootstrap) en el mismo orden (es importante) como dado.

    Cómo utilizar Popper.js con Bootstrap 4 beta

    <head>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
    </head>
    
  6. 1

    Sólo el uso de bootstrap del paquete de la versión y su buena!

    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    <!-- <script src="./node_modules/popper.js/dist/popper.min.js"></script> -->
    <!-- <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script> -->
    <script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    
  7. 1

    Como por Fez Vrasta.

    Si la recuperación de popper a través de NuGet Package Manager dentro de Visual Studio asegúrese de que su popper.js secuencia de comandos de referencia de la ruta de acceso es mediante el umd carpeta:

    MVC ASP.Net BundleConfig ejemplo:

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/umd/popper.js", //path with umd
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));
    

    Directa de la secuencia de comandos de ejemplo de referencia:

    <script src="~/Scripts/umd/popper.js" type="text/javascript"></script>
    
  8. 0

    De Envases Separados:

    Si has seguido el aceptado respuesta y su herramienta-consejos todavía están en el lugar equivocado, es podría ser porque usted tiene un contenedor diferente para cada herramienta de punta.

    Me gustaría probar este para permitir que el consejo de herramienta para ser colocado cerca de el padre de el elemento:

    const initializeTooltips = function () {
        $('[data-toggle="tooltip"]').each(function() {
            $(this).tooltip({container: $(this).parent()});
        });
    };
    $(document).ready(function () {
        initializeTooltips();
    });
    

    Pruébelo usted mismo en jsfiddle.

Dejar respuesta

Please enter your comment!
Please enter your name here