在Django模板中使用HTMX/JavaScript遇bootstrap未定义问题

问题原因 #

webpack 默认会将 ES 模块包裹在独立的函数作用域中，你在 index.js 里通过 import 引入的 bootstrap 和 htmx 仅存在于模块内部，不会自动暴露到全局作用域。而模板内的 <script> 属于全局作用域，因此无法访问这些模块变量。

解决方案 #

方案1：手动将模块挂载到全局window对象 #

修改你的 index.js，把 bootstrap 和 htmx 挂载到 window 上，让全局脚本能访问到：

import "../scss/myapp.scss";
import "../css/style.css";
import htmx from 'htmx.org';
import * as bootstrap from "bootstrap";

// 挂载到全局window对象
window.htmx = htmx;
window.bootstrap = bootstrap;

方案2：将模板脚本迁移到webpack打包的模块中 #

把模板里的逻辑移到 index.js 里，避免依赖全局变量，更符合模块化规范：

import "../scss/myapp.scss";
import "../css/style.css";
import htmx from 'htmx.org';
import * as bootstrap from "bootstrap";

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  const modalElement = document.getElementById('thingModal');
  if (!modalElement) return;

  const modal = new bootstrap.Modal(modalElement);
  
  htmx.on('htmx:afterSwap', (e) => {
    if (e.detail.target.id === 'thingSection') {
      modal.show();
    }
  });
});

之后删除模板内的 <script> 代码即可。

方案3：确保打包脚本的加载顺序 #

检查基础模板中脚本的引入顺序，必须保证 webpack 打包后的 vendors.h3117haj3.js 在模板内的 <script> 之前加载，比如：

<!-- 先加载webpack打包的脚本 -->
<script src="{% static 'js/vendors.h3117haj3.js' %}"></script>
<!-- 再加载模板内的脚本 -->
<script>
const modal = new bootstrap.Modal(document.getElementById("thingModal"))
// ... 其余代码
</script>

内容的提问来源于stack exchange，提问作者Hanny