‘bootstrap is not defined’の解決方法
Bootstrap v5.0のモーダル(Modal)をJavaScript経由でオープン・クローズしようとした際に次のようなエラーが出る場合の対処方法。
Uncaught ReferenceError: bootstrap is not defined
bootstrap
が定義されていないということなので、どうやって定義するかになります。
公式では、次のような記述で処理可能となっていますが、そのまま記述すると上記エラーが発生しました。
ちなみに発生した環境はgulpでSassをコンパイルし、コンパイルしたCSSとBootstrap5をwebpackでまとめたjsファイルを使っている場合です。
対処方法
webpackの対象からjsファイルを除き、通常ビルドされたものを使うことで解決できました。
webpackでCSSのみを出力する
- webpackのエントリポイント(通常src/index.js)からJavascript部分を削除する
- CSSを別ファイルとして出力するためにmini-css-extract-pluginをインストールする
- webpack.config.jsを次のようにし、CSSを別ファイルとして出力する
ここではstyle.cssとして出力
通常ビルドされたBootstrapのJavaScriptを使う
/node_modules/bootstrap/dist/jsからbootstrap.min.jsまたはbootstrap.bundle.min.jsをView側で見れる場所にコピーします。
今回は次のような構成で配置しています。
- public/css/style.css
- public/js/bootstrap.min.js
- public/index.html
index.htmlに以下を記述します。
これで次のコードを使ったモーダルのオープンができます。
モーダルのクローズは次のコードで行います。
クローズ時の注意点
JavaScript経由でのモーダルクローズには、次の注意点があります。
ボタンなどからオープンしたモーダルはクローズできない
JavaScript経由(show()
)でオープンしたモーダルしかクローズできません。
インスタンスはオープン時のものと同じものしか使えない
次のようなコードではクローズできません。
次のようにオープンと同じインスタンスに対してクローズしなければいけません。