SymfonyEncore + jQuery + Bootstrap: Не работает только с бутстрапом, а с остальным — нормально, как починить?

Question

[Григорий Васильков]

Привет, собираю проект с помощью Symfony Encore.
Везде jQuery работает через
import $ from 'jquery';

А вот бутстрап, который ожидает, что она находится в window чтобы её подключить - не видит её.
Где бы я не написал import $ from jQuery, она есть даже в браузере, но при сборке бутстрап её не ловит, оно и понятно, какой ещё window при сборке.

Сожалею, но я не до конца понимаю как внутри работает вебпак с обработкой всех этих импортов, поэтому влезть внутрь не вышло, но если отредактировать исходники бутстрапа, и вывести console.log(jQuery) где нужно - то выпадает undefined в консоль браузера.

Подключаю так:

// app.js

import '../components/vendor/jquery/jquery.index.js';
import '../components/vendor/bootstrap/bootstrap.index.js';

// components/vendor/jquery/jquery.index.js

import $ from 'jquery';

global.$ = $;
global.jQuery = $;
window.$ = $;
window.jQuery = $;

// components/vendor/bootstrap/bootstrap.index.js

import 'bootstrap/js/dist/dropdown.js';
import 'bootstrap/js/dist/modal.js';
import 'bootstrap/js/dist/popover.js';
import 'bootstrap/js/dist/tab.js';
import 'bootstrap/js/dist/tooltip.js';

ps. самое забавное, что вкладки (tab) работают правильно. Не работают модальные окна.

<button type="button" class="btn btn-primary"
            data-toggle="modal" data-target="#modalAlbum"
        >
            {{- '@admin.label.button_modal_album'|trans -}}
        </button>

<div tabindex="-1"
    role="dialog" aria-labelledby="modalAlbumLabel" aria-hidden="true"
    id="modalAlbum" class="modal fade"
>

    <div role="document"
        class="modal-dialog modal-dialog-centered"
    >
        <div class="modal-content">

            <div class="modal-header">
                <h5 id="modalAlbumLabel" class="modal-title">
                    {{- '@admin.title.modal_album'|trans -}}
                </h5>

                <button type="button"
                    class="btn-close"
                    aria-label="{{ '@admin.label.button_close'|trans }}"
                    data-dismiss="modal"
                ></button>
            </div>
            <div class="modal-body">

                {% include 'components/admin/album/album.html.twig' %}

            </div>
            <div class="modal-footer">
                <button type="button"
                    class="btn btn-secondary"
                    data-dismiss="modal"
                >
                    {{- '@admin.label.button_close'|trans -}}
                </button>
                <button type="button"
                    class="btn btn-primary"
                >
                    {{- '@admin.label.button_apply'|trans -}}
                </button>
            </div>

        </div>
    </div>

</div>

Answer 1

[Григорий Васильков]

Блин, разобрался :)

Верстка с мануала бутстрап 4, а либа подключена версии 5.
Там на атрибутах есть еще "bs":

// data-bs-toggle="modal"
// data-bs-target="#modalAlbum"
// data-bs-dismiss="modal"