Webpack 5中Bootstrap JS组件导入异常问题排查与解决

问题现象 #

• 采用单个组件直接导入时，Dropdown功能无法完全正常工作，且控制台无报错：

  import Dropdown from 'bootstrap/js/dist/dropdown'
  

  具体表现：点击切换按钮后，能看到Popper对下拉菜单进行定位，但菜单始终不显示，按钮的aria-expanded属性也不会切换状态。Webpack开发/生产模式下结果一致，手动调用实例化代码也没有效果：

  const myDropDown = Dropdown.getOrCreateInstance(myDropDownToggle);
  

• 改用整体导入方式时，Dropdown功能完全正常，但会导入全部Bootstrap JS代码（包含未使用的组件），造成冗余：

  import { Dropdown } from 'bootstrap'
  

排查结论 #

通过检查项目的package.json和Webpack配置后发现：

• 项目中只要存在任意一处import { Dropdown } from 'bootstrap'这种ESM风格的导入（即使对应的文件没有被直接引用），Webpack就会加载全部Bootstrap JS代码
• 同时混用两种导入方式，会导致Dropdown相关代码被重复加载，进而引发功能异常

解决方案 #

彻底移除所有import { Dropdown } from 'bootstrap'语句，仅保留单个组件的直接文件导入方式：

import Dropdown from 'bootstrap/js/dist/dropdown'

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