web-dev-qa-db-ja.com

Gatsbyウェブサイトにbootstrap jsを追加する方法

私はギャツビーをいじくり回しており、静的Webサイトにシームレスな機能を提供します。私はbootstrapを使用してレイアウトを設計する必要があるスタックを持っていますが、レイアウトに関する限りbootstrapはうまく機能しますが、ドロップダウンカルーセルやモーダルなどの追加サポートにはローカル環境ではすべて正常に動作しますが、bootstrap.jsと依存関係を使用しますが、私が自分のWebサイトを展開しているとき、netlifyがこの問題に直面しています

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

公式リポジトリとGoogleでこの問題をさらに掘り下げた後、ほとんどの人がreact-bootstrapまたはreactstrapを推奨していますが、私はbootstrapjsに非常に縛られており、上記のエラーの適切な修正を見つけることができません。 bootstrap js？これが私の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"
  },

前もって感謝します！

javascriptreactjstwitter-bootstrapbootstrap-4gatsby
5
Mr. Pyramid

[受け入れられた回答とほぼ同じ。]

Bootstrapおよびgatsbyとの関連する依存関係を追加する別の方法は、次のようにgatsby-browser.jsに追加することです。

ステップ1：実行npm i bootstrap jquery popper.js

ステップ2：gatsby-browser.jsに次のインポートを追加

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";

注：gatsby-browser.jsがすでに存在し、ES5コードが含まれている場合、最初にES6に変換する必要があります

1
kushal.8