web-dev-qa-db-fra.com

Comment ajouter bootstrap js dans un site Web Gatsby

J'ai peaufiné Gatsby et de loin, il fournit des fonctionnalités transparentes pour les sites Web statiques. J'ai une pile où j'ai besoin de concevoir des mises en page en utilisant bootstrap en ce qui concerne les mises en page bootstrap fonctionne bien mais pour un support supplémentaire comme le carrousel déroulant ou le modal, je dois utilisez bootstrap.js et ses dépendances bien que dans l'environnement local tout fonctionne bien mais quand je déploie mon site web notre netlify je suis confronté à ce problème

4:25:02 PM: failed during stage 'building site': Build script returned non-zero exit code: 1
4:25:01 PM:   7 | //# sourceMappingURL=bootstrap.min.js.map
4:25:01 PM: 
4:25:01 PM:   WebpackError: TypeError: Cannot set property 'emulateTransitionEnd' of undefin  ed
4:25:01 PM:   
4:25:01 PM:   - bootstrap.min.js:6 
4:25:01 PM:     [lib]/[bootstrap]/dist/js/bootstrap.min.js:6:2564
4:25:01 PM:   
4:25:01 PM:   - bootstrap.min.js:6 ./node_modules/bootstrap/dist/js/bootstrap.min.js
4:25:02 PM: Shutting down logging, 58 messages pending

Après avoir approfondi ce problème dans le référentiel officiel et sur Google, la plupart des gens recommandent react-bootstrap ou reactstrap, mais je suis très lié à bootstrapjs et incapable de trouver le correctif pour l'erreur ci-dessus.Il existe de toute façon ou la meilleure façon d'inclure = bootstrap js? Voici mon fichier package.json.

"dependencies": {
    "bootstrap": "^4.3.1",
    "gatsby": "^2.8.2",
    "gatsby-image": "^2.1.2",
    "gatsby-plugin-manifest": "^2.1.1",
    "gatsby-plugin-offline": "^2.1.1",
    "gatsby-plugin-react-helmet": "^3.0.12",
    "gatsby-plugin-react-svg": "^2.1.1",
    "gatsby-plugin-sass": "^2.0.11",
    "gatsby-plugin-sharp": "^2.1.3",
    "gatsby-source-filesystem": "^2.0.38",
    "gatsby-transformer-sharp": "^2.1.21",
    "jquery": "^3.4.1",
    "node-sass": "^4.12.0",
    "popper.js": "^1.15.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-helmet": "^5.2.1"
  },
  "devDependencies": {
    "prettier": "^1.17.1"
  },

Merci d'avance!

javascriptreactjstwitter-bootstrapbootstrap-4gatsby
5
Mr. Pyramid

[Presque similaire à la réponse acceptée.]

Une autre façon d'ajouter Bootstrap et les dépendances associées avec gatsby est de les ajouter dans gatsby-browser.js comme suit:

Étape 1: Exécutez npm i bootstrap jquery popper.js

Étape 2: Dans gatsby-browser.js ajouter les importations suivantes

import "bootstrap/dist/css/bootstrap.min.css";
import "jquery/dist/jquery.min.js";
import "popper.js/dist/popper.min";
import "bootstrap/dist/js/bootstrap.min.js";

Remarque: si gatsby-browser.js est déjà présent et contient du code ES5, qui doit d'abord être converti en ES6

1
kushal.8