L'info-bulle ne fonctionne pas malgré l'installation de JQuery et de Bootstrap

Question

Des questions apparemment similaires existent here et here mais les réponses fournies ne répondent pas à ma situation. J'ai une pile Node/Express/Webpack sur mon serveur sur laquelle j'ai utilisé npm pour installer Bootstrap 4 alpha 6 avec tether.js, la dépendance requise pour la fonctionnalité de l'info-bulle. Dans mon fichier JS, tel que défini dans la configuration de webpack, je attache importées à l'aide et initialisé fonction infobulle Bootstrap en utilisant les extraits suivants:

import "tether"; 

et:

$(function() { 
    $('[data-toggle="tooltip"]').tooltip() 
}) 

Puis, dans mon index .hbs (J'utilise un guidon pour rendre mes pages), je l'extrait de code suivant la mise en œuvre l'info-bulle:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" title="Tooltip on top"> 
    Tooltip on top 
</button> 

le SCIP pts compiler avec succès sans aucune erreur ou avertissement. Cependant, lors du chargement de la page dans le navigateur, j'obtiens l'erreur en disant tooltip is not a function.... Cela ne devrait pas se produire, non? Je peux confirmer que JQuery fonctionne bien comme l'extrait suivant juste en dessous d'une initialisation infobulle comme indiqué ci-dessus est rendu sans aucun hoquet:

$('p#some').html('from jquery'); 

Comme on le voit ci-dessous, à la fois JQuery et Tether plugins ainsi que celui de infobulle ont été lancés dans mes webpack.config.js fichier:

plugins: [ 
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), 
    new ExtractTextPlugin({ filename: "../../public/dist/main.min.css" }), 
    new webpack.ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery", 
     "window.jQuery": "jquery", 
     Tether: "tether", 
     "window.Tether": "tether", 
     Alert: "exports-loader?Alert!bootstrap/js/dist/alert", 
     Button: "exports-loader?Button!bootstrap/js/dist/button", 
     Carousel: "exports-loader?Carousel!bootstrap/js/dist/carousel", 
     Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse", 
     Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown", 
     Modal: "exports-loader?Modal!bootstrap/js/dist/modal", 
     Popover: "exports-loader?Popover!bootstrap/js/dist/popover", 
     Scrollspy: "exports-loader?Scrollspy!bootstrap/js/dist/scrollspy", 
     Tab: "exports-loader?Tab!bootstrap/js/dist/tab", 
     Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip", 
     Util: "exports-loader?Util!bootstrap/js/dist/util", 
    }), 
    new webpack.LoaderOptionsPlugin({ postcss: [autoprefixer] }), 
    ] 

Les fichiers de projet sont disponibles en tant que here repo interne dans le cas où il aide.

Answer 1

Quelques problèmes, car j'ai rencontré des problèmes similaires moi-même.

1) Vous devez fournir une référence à popper.js dans la section plugins de webpack.config.js;

Popper: ['popper.js', 'default'], 

2) dans votre js principal, importez le plugin requis;

import 'bootstrap/js/dist/tooltip'; 

Plus d'infos ici: Bootstrap 4 - Webpack install