web-dev-qa-db-fra.com

Bootstrap 4: Uncaught ReferenceError: Popper n'est pas défini

J'ai installé Bootstrap 4 en utilisant Node et Gulp et lors de l'exécution de l'application, le message d'erreur suivant s'affiche: 

Uncaught ReferenceError: Popper n'est pas défini

Je n’utilise jusqu’à présent le système de grille Bootstrap et je n’ai utilisé aucun élément nécessitant le logiciel Bootstrap JS. Il me semble que quelque chose manque dans Bootstrap ou que je ne l’ai pas installé correctement (pour être honnête, c’est probablement moi) - Quelqu'un d’autre a-t-il rencontré le même problème ou connaissait-il une solution? 

javascriptjquerybootstrap-4
47
Web Develop Wolf

Depuis la version 2 de Bootstrap, nous avons ajouté deux nouveaux fichiers dist: bootstrap.bundle.js et bootstrap.bundle.min.js qui contiennent Popper.js à l'intérieur.

De plus, utilisez ce lien pour trouver la dernière version de Popper.js: https://cdnjs.com/libraries/popper.js car la version liée ci-dessus (1.8.2) est très ancienne, la dernière est 1.12.9

Par ailleurs, vous devez choisir la version UMD de Popper.js, car c’est celle utilisée par Bootstrap.

47
Johann-S

Utilisez bootstrap.bundle.js qui a déjà popper.js chemin NPM 'bootstrap/dist/js/bootstrap.bundle.js' .

21
Anuj Dhanju

Pour ceux qui ont des problèmes avec Webpack: dans votre fichier d’entrée,
import 'bootstrap' donne l'erreur. Vous devez le supprimer et le remplacer par import 'bootstrap/dist/js/bootstrap.bundle.js'

Cela suffit et vous n'avez pas besoin d'importer Popper séparément. Cela s’applique à bootstrap 4.0.0.beta2

15
Euripides Georgantzos

Dans mon cas, il est apparu que le script popper.js devrait être appelé avant bootstrap.js .

<script src="https://../popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://../bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
11
Abdelsalam Shahlol

J'ai eu le même problème et je l'ai joué pendant une demi-journée sur un simple carrousel. Safari sur Mac n'a pas donné de retour d'information en ce sens qu'il y a une priorité sur les bibliothèques:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

En examinant l'erreur, j'ai rencontré "Vous avez besoin de JQ avant BS pour que cela fonctionne", alors je l'ai essayé, en mettant aussi Popper avant BS. 

J'ai donc tout cela dans mon <head> et ça a fonctionné. 

3
Rich_F

1-Copier le code sur cette page: https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js

2-Past sur le nouveau fichier et enregistrer sous ce nom (popper.min.js)

3-Ajouter un script sur le code HTML avant le script d'amorçage:

<script src="popper.min.js"></script>
<script src="bootstrap.js"></script>
1
G. Hamza

J'ai eu le même. Je suis sur Rails et j'ai suivi l’installation de bootstrap 4 gem à partir de https://github.com/twbs/bootstrap-rubygem . Je viens juste de commencer par créer popper exigence dans application.js, comme ceci: 

//= require popper
//= require jquery3
//= require jquery_ujs
//= require bootstrap-sprockets
//= require bootstrap
1
Maxime Boué