• HOME
• HTML/CSS
• Bootstrap
• ‘bootstrap is not defined’の解決方法

‘bootstrap is not defined’の解決方法

Tweet

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

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();

Tweet

前の記事

Bootstrapでモーダル表示時にエラーが発生する場合の解決方法