web-dev-qa-db-fra.com

Erreur Bootstrap 4 "La liste déroulante Bootstrap nécessite Popper.js", avec Aurelia CLI et Require.js

Je ne parviens pas à configurer Bootstrap 4 beta dans une application Aurelia CLI (v0.31.1) avec requirejs et à l'aide de TypeScript. Après avoir essayé plusieurs variantes de configuration, j'obtiens toujours l'erreur de console suivante:

Erreur non capturée: la liste déroulante d'amorçage nécessite Popper.js

Voici les étapes à suivre pour reproduire. Tout d'abord, installez les paquets:

$ npm install --save jquery [email protected] popper.js

Ensuite, j'ai configuré aurelia.json:

  "jquery",
  {
    "name": "popper.js",
    "path": "../node_modules/popper.js/dist/umd",
    "main": "popper"
  },
  {
    "name": "bootstrap",
    "path": "../node_modules/bootstrap/dist",
    "main": "js/bootstrap.min",
    "deps": [
      "jquery",
      "popper.js"
    ],
    "exports": "$",
    "resources": [
      "css/bootstrap.css"
    ]
  }

Notez dans la configuration ci-dessus que: 

  • popper.js est enregistré avant bootstrap
  • le module UMD est utilisé
  • popper.js est défini comme une dépendance pour bootstrap, à côté de jquery

Enfin, dans mon app.ts:

import 'bootstrap';

Avec cette configuration, la construction à l'aide de au build fonctionne bien. Mais lors de l'exécution, en utilisant au run --watch, j'obtiens les erreurs de console suivantes:

Erreur non capturée: la liste déroulante d'amorçage nécessite Popper.js ( https://popper.js.org ) (defaults.js: 19)
Erreur non capturée: la liste déroulante d'amorçage nécessite Popper.js ( https://popper.js.org ) (bootstrap.min.js: 6)
... un peu plus loin:
Uncaught TypeError: plugin.load n'est pas une fonction chez Module. (defaults.js: 19)

Malheureusement, les documents Bootstrap 4 ne mentionnent que instructions sur webpack . Il en va de même pour une recherche sur le canal Gitter.im d’Aurelia et sur StackOverflow. Je ne trouve pas d'échantillons concernant Aurelia CLI avec Require.js. Enfin, les résultats de Google ne montrent que des exemples d’incorporation des versions alpha (reposant sur le «partage de connexion» plutôt que sur le «popper»).

Des questions similaires sur SO, qui ont la même erreur mais ne sont pas applicables à ma situation:

Alors, ma question: comment puis-je configurer Bootstrap 4 avec Popper.js dans une application Aurelia CLI (en utilisant Require.js, pas Webpack)?

Merci.

typescriptrequirejsaureliabootstrap-4aurelia-cli
12
Juliën

Popper a remplacé Tether dans la version bêta.

En tant que tel, vous aurez besoin d’échanger l’attache avec popper (ou tout simplement de l’ajouter si vous n’avez jamais eu l’alpha) dans la section prepend de votre fichier aurelia.json. (Assurez-vous de créer un lien vers la version UMD présentée ci-dessous)

"prepend": [
   ...
          "node_modules/jquery/dist/jquery.js",
          "node_modules/popper.js/dist/umd/popper.min.js",
   ...
     ]

Vous aurez également besoin du groupement comme prévu, quelque chose comme ceci:

      {
        "name": "bootstrap4",
        "path": "../node_modules/bootstrap/dist",
        "main": "js/bootstrap.min",
        "deps": [
          "jquery"
        ],
        "exports": "$",
        "resources": [
          "css/bootstrap.css"
        ]
      }

= Addendum =

Contrairement à Tether, popper n’a pas besoin d’être ajouté au début, il semble que ... vous pouvez donc l’inclure comme toute autre dépendance avec 

 {
     "name": "popper.js",
     "path": "../node_modules/popper.js/dist/umd",
     "main": "popper.min"
 },
11
4imble

J'ai désinstallé popper.js et utilisé la version intégrée à bs4 en utilisant js/bootstrap.bundle.min au lieu de js/bootstrap.min

  "jquery",
  {
    "name": "bootstrap",
    "path": "../node_modules/bootstrap/dist",
    "main": "js/bootstrap.bundle.min",
    "deps": ["jquery"],
    "exports": "$",
    "resources": [
      "css/bootstrap.css"
    ]
  },
6
smoore4

Ajoutez votre code.

<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
2
Diogo Santos

Utiliser la version fournie de BS4 a fonctionné pour moi comme suit: -

Supprimer le popper npm uninstall popper.js

Mise à jour vers BS4 ou version ultérieure npm install bootstrap --save

Assurez-vous que jquery est installé npm install bootstrap --save

Éditez `.angular-cli.json 'pour inclure jquery et BS4 fourni

   "scripts": [
    "../node_modules/jquery/dist/jquery.slim.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
   ],
2
Tim Tharratt

à partir du dernier bootstrap 4.0 ci-dessous est la configuration de travail pour bootstrap avec popper

//file; aurelia_project/aurelia.json
"dependencies": [   
    ...
    ... // other dependencies
    ...

   "text",
   "jquery",
   {
     "name": "popper.js",
     "path": "../node_modules/popper.js/dist/umd",
     "main": "popper.min"
   },
   {
     "name": "bootstrap",
     "path": "../node_modules/bootstrap/dist",
     "main": "js/bootstrap.min",
     "deps": ["jquery"],
     "exports": "$",
     "resources": [
       "css/bootstrap.css"
     ]
   },
...
... // remaining dependencies
...
],

Cela fonctionne avec les dernières aurelia et bootstrap (à partir de 2018-février) sans utiliser la méthode prepend

0
Waku-2