Использование HTMX/Javascript в шаблоне Django : не определено

Я решил попробовать HTMX с Django и реализовать Django форму в модальном окне. Я нашел этот учебник и следовал ему.

Я дошел до той части, где используется функция HTMX htmx:afterSwap для открытия модала, но когда я помещаю ее в тег скрипта в шаблоне, я сталкиваюсь с ошибкой. Ошибка возникает на шаге 4.

Мой шаблон выглядит (в основном) так. Я попытался сократить его до самого необходимого.

{% for thing in things %}
    {% if forloop.first %}
    <ul id="myThingList" class="things">
    {% endif %}
    <button id="thing{{ thing.id }}Button" type="button" class="btn btn-primary" hx-get="{% url 'myapp:things-create' %}" hx-target="#thingSection"> Upload Thing</button>
    <li id="thingItem" class="thing" hx-target="this" hx-swap="outerHTML">
        {{ thing.name }}
    </li>
    <div id="thingModal" class="modal fade" role="dialog" tabindex="-1" aria-labelledby="thingModal" aria-hidden="true">
        <div id="thingSection" class="modal-dialog modal-dialog-centered" hx-target="this" role="document"></div>
    </div>
    {% if forloop.last %}
    </ul>
    {% endif  %}
{% empty %}
    <p class="no-things">No things have been added yet.</p>
{% endfor %}


<script>
const modal = new bootstrap.Modal(document.getElementById("thingModal"))

htmx.on("htmx:afterSwap", (e) => {
  // Response targeting #thingSection => show the modal
  if (e.detail.target.id == "thingSection") {
    modal.show()
  }
})

</script>

Я получаю Uncaught ReferenceError: bootstrap is not defined

Дополнительная информация:

HTMX работает (я использую его в других частях шаблона без проблем) и Bootstrap загружен, потому что все CSS работают и на странице/шаблоне.

Я использую webpack для вендора всех моих JS файлов (объединенных/минимизированных) их в один vendors.h3117haj3.js файл. Числа - это случайный хэш, который связан с базовым шаблоном, который я расширяю в других шаблонах.

Есть ли способ заставить его распознать bootstrap и htmx в этом теге скрипта?

При использовании бандлера у вас есть возможность включить все компоненты Boostrap в пространство имен, например bootstrap, или включить только отдельные компоненты, чтобы сохранить небольшой размер бандла. В руководстве, на которое дана ссылка, использовался метод script include, который по умолчанию включает все компоненты BS под пространством имен bootstrap. Чтобы повторить это с помощью бандлера, необходимо изменить ваши index.js:

import "../scss/myapp.scss"
import "../css/style.css"
import 'htmx.org'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'

Тогда bootstrap.Modal() будет действительной функцией.

Если вы хотите импортировать только модальный компонент, вы можете использовать:

import { Modal } from 'bootstrap'

Тогда у вас доступен метод Modal(), поэтому вам нужно изменить и эту строку в вашем шаблоне:

const modal = new Modal(document.getElementById("thingModal"))
Вернуться на верх