[解決済み] ギャツビーサイトでbootstrap jsを追加する方法

質問

ギャツビーで微調整していますが、静的なWebサイトでは圧倒的にシームレスな機能を提供してくれます。レイアウトに関してはbootstrapがうまく機能しますが、ドロップダウンやカルーセル、モーダルなどの追加サポートはbootstrap.jsとその依存関係を使用する必要があります。

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にとても縛られていて、上記のエラーに対する適切な修正方法を見出すことができません。以下は、私の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"
  },

ありがとうございました。

どのように解決するのですか？

この問題は、ブートストラップの依存関係を gatsby-browser.js (プロジェクトに存在しない場合は、ルートディレクトリに同じ名前の新しいファイルを作成し、追加してください。 gatsby-browser.js ).

まず、私 をインストールします。 を使って npm :

npm install bootstrap jquery @popperjs/core

そして、こんな感じです。 に追加された gatsby-browser.js :

import './src/sass/app.scss'
import 'jquery/dist/jquery.min.js'
import 'popper.js/dist/popper.min'
import 'bootstrap/dist/js/bootstrap.min.js'

app.scss は、ブートストラップ・コンポーネントとカスタム・スタイルをインポートしたファイルです。

または react-bootstrap を削除し、不要な jQuery はブートストラップに依存しますが、ブートストラップ・スタイリングを使用して、それ自身のコンポーネントをスタイリングします。

アップデイト

popper.jsは非推奨となり、現在では以下のようになります。 こちら

ベンさん、ご指摘ありがとうございます。

UPDATE [2021年5月]:

Bootstrapは2020年5月5日にv5をリリースしましたので、Bootstrap v5で作業されている方はこちらの手順で作業してください。

Bootstrap v5 では、Bootstrap は 1.x.x から 2.xx popper.js に移行しているため、:

ステップ1：まずBootstrapのバージョンを変更します。 npm i bootstrap@next

ステップ2：Popper.js を v2 に更新する npm i @popperjs/core

ステップ3: gatsby-browser.js 以下のインポートを追加します。

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";
import "@popperjs/core/dist/umd/popper.min.js";