Así Bootstrap 4 Beta es… yey! Sin embargo, Correa ha sido sustituido por Popper.js para la descripción (y otras características). Vi un error lanzado en la consola lo suficientemente rápido como para que me asesore de que el cambio Popper.js:

Bootstrap dropdown require Popper.js

Parece bastante fácil, yo fui y actualizado mi webpack.config.js (toda la config puede ser visto aquí) y Bootstrap, a continuación, comenzó a trabajar (el único cambio que hice fue reemplazar la correa de Sujeción con Popper):

plugins: [
new ProvidePlugin({
  'Promise': 'bluebird',
  '$': 'jquery',
  'jQuery': 'jquery',
  'window.jQuery': 'jquery',
  'window.$': 'jquery',
  Popper: 'popper.js' 
}),

También hice el import 'bootstrap' en mi main.ts archivo.

Sin embargo ahora tengo otro problema (que yo no tuve con Correa), un nuevo error se produce en la consola:

Uncaught TypeError: Popper is not a constructor

Si me intenta depurar en Chrome, tengo Popper cargado como un Objeto (que es la razón por Bootstrap dejado de quejarse) como se puede ver en la pantalla de impresión a continuación. Bootstrap 4 Beta importación Popper.js con Webpack 3.x tira de Popper no es un constructor

Finalmente para incluir a todos los de mi código. Yo uso Bootstrap descripción con un simple elemento personalizado construido con Aurelia y TypeScript (que utiliza para trabajar con los anteriores Bootstrap alpha 6 y el Amarre)

import {inject, customAttribute} from 'aurelia-framework';
import * as $ from 'jquery';

@customAttribute('bootstrap-tooltip')
@inject(Element)
export class BootstrapTooltip {
  element: HTMLElement;

  constructor(element: HTMLElement) {
    this.element = element;
  }

  bind() {
    $(this.element).tooltip();
  }

  unbind() {
    $(this.element).tooltip('dispose');
  }
}

Parece no importar Popper correctamente, si es así, entonces ¿cuál es la mejor manera de lograr que con Webpack 3.x?

OriginalEl autor ghiscoding | 2017-08-12

5 Comentarios

  1. 31

    Mientras navega Bootstrap 4 documentación. De hecho, encontré una sección sobre Webpack que explica cómo instalar correctamente. Tras la Arranque de la instalación con Webpack documentación, la respuesta es simplemente modificar la webpack.config.js con los siguientes:

    plugins: [
      //...
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default']
      })
      //...
    ]

    y no olvidemos a import en el main.ts

    import 'bootstrap';

    y voilà! Estamos de vuelta en el negocio 🙂

    impresionante!!! Estoy buscando hace 3 días en la web !!! muchas gracias!!!
    hola chicos! ¿Cómo puedo hacer lo mismo con aurelia.json ?
    la pregunta aquí era para WebPack sólo, pero para Aurelia-CLI, ¿has probado algo a lo largo de la línea de la anterior Amarre de importación: aurelia-cli-to-use-with-bootstrap-4
    sí, lo sé, aquí está lo que estoy buscando stackoverflow.com/questions/45816118/…
    muy similar a la respuesta anterior con Sujeción a continuación, la única diferencia que veo es el uso de la UMD camino. De todos modos, me alegro de que encontró su respuesta para la CLI 🙂

    OriginalEl autor ghiscoding

  2. 5

    Si usted está usando Webpack Hacer esto:

    window.$ = window.jQuery = require('jquery');
    window.Popper = require('popper.js').default; //pay attention to "default"
    require('bootstrap/dist/js/bootstrap');

    OriginalEl autor Hassan Azimi

  3. 3

    Me encontré en el mismo problema, y la solución que se describe a continuación: https://github.com/FezVrasta/popper.js/issues/287

    Mi main.ts ahora se ve algo como lo siguiente:

    import "jquery";
    import Popper from "popper.js";
    
    (<any>window).Popper = Popper;
    
    require("bootstrap");

    Y tuve que correr npm install @types/requirejs --save para obtener la llamada a require de trabajo.

    EDIT: estoy totalmente perdido esta la primera vez, pero la documentación de la realidad tiene una mejor manera de resolver este https://getbootstrap.com/docs/4.0/getting-started/webpack/

    plugins: [
      ...
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default'],
        //In case you imported plugins individually, you must also require them here:
        Util: "exports-loader?Util!bootstrap/js/dist/util",
        Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
        ...
      })
      ...
    ]
    La solución no estaba trabajando, en primer lugar, la razón más importante fue que tuve que quitar Popper completamente de la webpack.config.js. Puede usted, por favor menciónelo en su respuesta, de modo que puedo aceptar.
    Encontrar la forma correcta de hacerlo directamente en el webpack.config, de hecho, me encontré por suerte, mientras que la navegación nuevo Bootstrap 4 documentación en su sección de inicio. Así que en realidad me respondió a mi propia pregunta, pero aún upvoted el suyo, porque lo que me ayudó a entender el verdadero problema. Gracias de nuevo.

    OriginalEl autor Phil Cox

  4. 1

    En bootstrap": "^4.1.1" no hay necesidad de importar jquery y popper.js porque los plugins ya estará incluido cuando ‘bootstrap’ o bootstrap de plugins importados de forma individual.

    Aviso que si decide importar plugins de forma individual, también debe
    instalar las exportaciones-cargador de

    Sin necesidad de requerir los archivos require('exports-loader?file ... '); como se mencionó aquí porque este va a ser atendido de forma automática con sólo instalar $ npm install exports-loader --save-dev

    import 'bootstrap'; //Import all plugins at once
    
    //
    //Or, import plugins individually
    //
    //import 'bootstrap/js/src/alert';
    //import 'bootstrap/js/src/button';
    //import 'bootstrap/js/src/carousel';
    //import 'bootstrap/js/src/collapse';
    //import 'bootstrap/js/src/dropdown';
    //import 'bootstrap/js/src/modal';
    //import 'bootstrap/js/src/popover';
    //import 'bootstrap/js/src/scrollspy';
    //import 'bootstrap/js/src/tab';
    //import 'bootstrap/js/src/tooltip';
    //import 'bootstrap/js/src/util';

    No hay necesidad de hacer nada, como el de abajo:

    const webpack = require('webpack');
    
    module.exports = {
      configureWebpack: {
        plugins: [
          new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            Popper: ['popper.js', 'default']
          })
        ]
      }
    }

    Soy un vue.js desarrollador y en nueva vue-cli-3, creamos vue.config.js en la raíz y colocar el código de arriba para registrar un nuevo plugin, pero como dijo que no hay necesidad de hacer todo esto en bootstrap": "^4.1.1".

    Bootstrap de la descripción de plugin depende de popper.js y se deben habilitar de forma manual, por lo que usted puede hacer como el de abajo, en el componente donde se utiliza la descripción del elemento:

    <script>
      import $ from 'jquery';
    
      export default {
        mounted() {
          $('[data-toggle="tooltip"]').tooltip();
        },
      };
    </script>

    OriginalEl autor Syed

  5. 0

    En ASP.net Core 2 proyecto de agregar las siguientes secuencias de comandos de archivo HTML principal («_Layout.cshtml» archivo)

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/js/popper.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>

    Para mí es trabajo.

    OriginalEl autor HolyM

Dejar respuesta

Please enter your comment!
Please enter your name here