Bootstrap 4 erreur “Bootstrap déroulant besoin Popper.js” avec Aurelia CLI et Require.js

Je vais avoir des difficultés à configurer Bootstrap 4 beta dans un Aurelia CLI application (v0.31.1) avec requirejs et à l'aide de caractères d'imprimerie. Après avoir essayé plusieurs config variations que j'obtiens toujours la suite d'erreur de la console:

Erreur non interceptée: Bootstrap déroulant besoin Popper.js

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

$ npm install --save jquery bootstrap@4.0.0-beta popper.js

Suivant, 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"
    ]
  }

Avis dans la config ci-dessus que:

popper.js est inscrit avant de bootstrap
l'UMD module est utilisé
popper.js est défini comme une dépendance de bootstrap, à côté de jquery

Enfin, dans mon app.ts:

import 'bootstrap';

Avec cette configuration, la construction à l'aide de au build fonctionne très bien. Mais lors de l'exécution, à l'aide de au run --watch j'ai le console d'erreurs:

Erreur non interceptée: Bootstrap déroulant besoin Popper.js (https://popper.js.org) (valeur par défaut.js:19)

Erreur non interceptée: Bootstrap déroulant besoin Popper.js (https://popper.js.org) (bootstrap.min.js:6)

... un peu plus loin:

Uncaught TypeError: plugin.la charge n'est pas une fonction du Module. (les valeurs par défaut.js:19)

Malheureusement, le Bootstrap 4 docs mention instructions sur webpack. Donc fait une recherche sur Aurelia est Gitter.im canal et sur StackOverflow. Je ne peux pas trouver des échantillons concernant Aurelia CLI avec Require.js. Enfin, des résultats Google ne montre que des exemples de l'intégration de la versions alpha (qui reposait sur le "tethering", plutôt que " popper).

Des questions similaires, qui ont le même message d'erreur mais ne sont pas applicables à ma situation:

Donc, ma question: comment puis-je configurer Bootstrap 4 avec Popper.js dans un Aurelia CLI application (à l'aide de Require.js, pas Webpack)?

Grâce.

OriginalL'auteur Juliën | 2017-08-22

11

Popper remplacé la courroie d'Ancrage dans la version bêta.

Tant que tel, vous aurez besoin de remplacer la courroie d'ancrage avec popper (ou ajoutez-le simplement si vous n'avez jamais eu l'alpha) pour le faire précéder de l'article de votre aurelia.fichier json. (Assurez-vous un lien vers la version UMD voir ci-dessous)
```
"prepend": [
   ...
          "node_modules/jquery/dist/jquery.js",
          "node_modules/popper.js/dist/umd/popper.min.js",
   ...
     ]
```
Vous aurez également besoin d'un regroupement 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"
        ]
      }
```
=Additif=

Contrairement à d'attache, popper n'a pas besoin d'être ajouté, il me semble.
De sorte que vous pouvez l'inclure comme toute autre dépendance avec
```
 {
     "name": "popper.js",
     "path": "../node_modules/popper.js/dist/umd",
     "main": "popper.min"
 },
```
Génial, en ajoutant le "prepend" effectivement, même sans altérer l'original de mes regroupement. Merci!
Pas sûr que vous aurez envie de popper dans le groupement ainsi que vous serez notamment deux fois.
C'est génial merci pour la question et pour la réponse!
J'ai suivi ces instructions à la lettre, et n'a plus l'jQuery est ni définie erreur. Cependant, maintenant, je reçois des Uncaught TypeError: Popper is not a constructor. Dans mon main.ts j'ai inclus import "jquery"; import * as Popper from "popper.js"; (<any>window).Popper = Popper.default; import "bootstrap"; C'est à l'aide de aurelia-cli.
Vous avez certainement de ciblage de l'UMD version de popper? il vit dans un autre dossier.

OriginalL'auteur 4imble
6

Je l'ai désinstallé popper.js et utilisé la version intégrée dans 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"
    ]
  },
```
Je trouve cela de la façon la plus facile pour résoudre le problème. Note pour les autres lecteurs: dans le zipfile ils fournissent pour télécharger (actuellement) le fichier est "bootstrap-4.0.0/dist/js/bootstrap.bundle.min.js"
Résolu mon problème. Juste référence "bootstrap.bundle.min.js"

OriginalL'auteur smoore4

Ajouter dans 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>

OriginalL'auteur Diogo Santos

1

À l'aide du logiciel version de BS4 travaillé pour moi, comme suit :-

Supprimer popper npm uninstall popper.js

Mise à jour BS4 ou plus tard npm install bootstrap --save

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

Modifier".angulaire de la cli.json' inclure jquery et livré BS4
```
   "scripts": [
    "../node_modules/jquery/dist/jquery.slim.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
   ],
```
Comment faites-vous référence Popper dans vos fichiers?

OriginalL'auteur Tim Tharratt

de finale de bootstrap 4.0 ci-dessous est le travail de conf 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 la dernière aurelia & bootstrap (à partir de 2018-Février), sans l'aide de la faire précéder de la méthode

OriginalL'auteur Waku-2

Vous devez vous connecter pour publier un commentaire.

=Additif=