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

Bootstrap v5.0でモーダル表示しようとした時に次のようなエラーが発生する場合の解決方法。

Uncaught TypeError: BACKDROP: Option “rootElement” provided type “null” but expected type “element”.

BootstrapjQuerywebpackしたファイルを使った場合に発生するようです。CDNでは発生しませんでした。

webpackを使ったファイルの作成はこちら – webpackでBootstrapをまとめる

そもそもBootstrap v5.0ではjQueryが不要なため、本記事の解決方法が正しくない可能性があります。

エラーが発生するコード

/js/main.jswebpackしたファイルです。

main.html
<!doctype html>
<html>
<head>
    <meta charset="charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test page</title>
    <script src="/js/main.js"></script>
</head>
<body>
    <div class="m-2">
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">モーダルを開く</button>
    </div>

    <div class="modal" id="myModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">モーダル</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>コンテンツ</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">OK</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

画面

Bootstrapでモーダル表示時のエラー解決方法

エラーログ

Bootstrapでモーダル表示時のエラー解決方法

解決方法

/js/main.jsを読み込んでいるタグでasync="async"を記述します。async="async"を付けることでスクリプトの読み込みとページの読み込みが順番ではなく、同時に行われます。

    <script src="/js/main.js" async="async"></script>
Bootstrapでモーダル表示時のエラー解決方法

なんで非同期の読み込みにすると解決するのかは分かっていないんですけどね(;’∀’)
webpackしたことで変数名などが変わるので同期では駄目なのかな?

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

関連コンテンツ

スポンサードリンク

コメント

メールアドレスが公開されることはありません。