导入Bootstrap Modal后Dropdown下拉菜单无法触发问题求助

冲突成因 #

• 核心原因是Bootstrap JS被重复加载：你在app.js中已经引入了完整的bootstrap.bundle，该包内置了所有Bootstrap JS组件（含Dropdown、Modal）以及Popper依赖，会自动初始化全局组件事件监听。
• 后续在contact.js中单独import { Modal } from 'bootstrap'相当于二次加载Bootstrap核心代码，会覆盖/解绑之前已经绑定的Dropdown点击事件，导致点击时无法添加show类触发下拉展开，且无控制台报错。

解决方案 #

方案1：复用全局已加载的Bootstrap实例（推荐，改动最小） #

删除contact.js中的单独Modal引入语句，直接使用app.js加载后挂载到全局的bootstrap对象调用Modal即可，修改后的contact.js代码如下：

// 删除原有 import { Modal } from 'bootstrap' 语句
window.addEventListener("DOMContentLoaded", () => {
  if (document.getElementById('emailHasBeenSent') !== null && document.getElementById('emailHasBeenSent').value) {
    // 直接调用全局挂载的Modal
    const Modal = window.bootstrap.Modal;
    const modal = new Modal(document.getElementById('contactUsModal')),
        closeModalBtn = document.querySelector('.contact--modal-close-btn');

    modal.show();

    closeModalBtn.addEventListener('click', e => {
        modal.hide();
    })
}});

方案2：统一按需引入组件 #

如果你不需要用到全部Bootstrap组件，可放弃加载完整的bundle包，统一在全局入口按需引入所有用到的组件，避免重复加载：

1. 替换app.js的引入代码：

// 删掉原有const bootstrap = require('bootstrap/dist/js/bootstrap.bundle');
import { Dropdown, Modal } from 'bootstrap';
// 挂载到全局按需使用
window.bootstrap = { Dropdown, Modal };

2. 保留contact.js中通过全局bootstrap调用Modal的逻辑即可。

内容的提问来源于stack exchange，提问作者batcat the cat