Django项目中Webpack引入Bootstrap调用$(...).modal报错未定义

问题根因 #

配置中单独通过exports-loader导出Modal、以及Bootstrap加载时未检测到全局jQuery对象，导致modal方法未挂载到jQuery原型上。

修复步骤 #

1. 调整webpack配置
   修改webpack.config.js中的ProvidePlugin配置，删除单独导出Modal的规则：

plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default'],
    // 移除 Modal: 'exports-loader?Modal!bootstrap/js/dist/modal' 这一行
  }),
]

2. 统一入口文件引入顺序
   在你的入口JS（比如./objectivedeck/static/js/index.js）最顶部添加如下代码，先把jQuery挂载到全局window对象，再加载Bootstrap：

import $ from 'jquery';
window.$ = $;
window.jQuery = $;
// 加载完整Bootstrap JS，也可按需加载modal：import 'bootstrap/js/dist/modal'
import 'bootstrap';

删除业务代码中零散的Bootstrap/modal引入语句，避免重复加载导致方法覆盖。

3. 排查依赖版本冲突
   运行npm ls jquery检查是否存在多版本jQuery，如果有多个版本，执行npm install jquery@3.6.0 --save锁定Bootstrap 4兼容的jQuery版本。

如果使用的是Bootstrap 5，默认不支持jQuery调用方式，可直接使用原生调用方式：

// Bootstrap 5原生调用modal示例
const modalDom = document.querySelector('#你的modal元素ID');
const modalInstance = new bootstrap.Modal(modalDom);
// 调用显示/隐藏方法
modalInstance.show();
// modalInstance.hide();

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