‘bootstrap is not defined’の解決方法

Bootstrap v5.0のモーダル(Modal)をJavaScript経由でオープン・クローズしようとした際に次のようなエラーが出る場合の対処方法。

Uncaught ReferenceError: bootstrap is not defined

bootstrapが定義されていないということなので、どうやって定義するかになります。
公式では、次のような記述で処理可能となっていますが、そのまま記述すると上記エラーが発生しました。

const myModal = new bootstrap.Modal(document.getElementById('sampleModal'));
myModal.show();

ちなみに発生した環境はgulpでSassをコンパイルし、コンパイルしたCSSとBootstrap5をwebpackでまとめたjsファイルを使っている場合です。

対処方法

webpackの対象からjsファイルを除き、通常ビルドされたものを使うことで解決できました。

webpackでCSSのみを出力する

  1. webpackのエントリポイント(通常src/index.js)からJavascript部分を削除する
  2. CSSを別ファイルとして出力するためにmini-css-extract-pluginをインストールする
     npm install mini-css-extract-plugin
    
  3. webpack.config.jsを次のようにし、CSSを別ファイルとして出力する
    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    
    module.exports = {
        mode: "production",
        module: {
            rules: [
                {
                    // 対象となるファイルの拡張子.
                    test: /\.css$/,
                    use: [
                        // CSS を別ファイルにする.
                        MiniCssExtractPlugin.loader,
                        {
                            loader: "css-loader",
                            options: {
                                importLoaders: 0, 
                            },
                        },
                    ]
                },
                {
                    test: /\.(woff|woff2|eot|ttf|svg)$/,
                    type: "asset/inline"
                },
            ],
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: 'style.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に以下を記述します。

<link rel="stylesheet" href="/css/style.css">
<script type="module" src="/js/bootstrap.min.js"></script>

これで次のコードを使ったモーダルのオープンができます。

const myModal = new bootstrap.Modal(document.getElementById('sampleModal'));
myModal.show();

モーダルのクローズは次のコードで行います。

myModal.hide();

クローズ時の注意点

JavaScript経由でのモーダルクローズには、次の注意点があります。

ボタンなどからオープンしたモーダルはクローズできない

JavaScript経由(show())でオープンしたモーダルしかクローズできません。

インスタンスはオープン時のものと同じものしか使えない

次のようなコードではクローズできません。

  const sampleModal = new bootstrap.Modal(document.getElementById('sampleModal'));
  sampleModal.show();

  :

  const sampleModal2 = new bootstrap.Modal(document.getElementById('sampleModal'));
  sampleModal2.hide();

次のようにオープンと同じインスタンスに対してクローズしなければいけません。

  const sampleModal = new bootstrap.Modal(document.getElementById('sampleModal'));
  sampleModal.show();

  :

  sampleModal.hide();
このエントリーをはてなブックマークに追加
にほんブログ村 IT技術ブログへ

コメント

メールアドレスが公開されることはありません。 が付いている欄は必須項目です