SymfonyEncore + jQuery + Bootstrap: Not working only with bootstrap, but with the rest it's fine, how to fix it?

Question

JavaScript

Hello, I'm building a project with Symfony Encore.
Everywhere jQuery works through . But the bootstrap, which expects it to be in window in order to connect it, does not see it. Wherever I write import $ from jQuery, it is even in the browser, but bootstrap does not catch it when building, it is clear what other window is when building. I’m sorry, but I don’t fully understand how the webpack works inside with the processing of all these imports, so it didn’t work out to get inside, but if you edit the bootstrap sources and display console.log (jQuery) where necessary, then undefined drops out in the browser console. I connect like this:
import $ from 'jquery';

// 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. the funny thing is that tabs (tab) work correctly. Modal windows don't work .

<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

Damn, I figured it out :)
Layout from the bootstrap 4 manual, and version 5 is connected.
There are also "bs" on the attributes:

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