已引入Popper但createPopper不是函数？如何让两个Bootstrap Dropdown正常工作？

核心问题分析 #

你遇到的矛盾现象（加type="application/json"时导航栏Dropdown工作、主体失效；不加则相反），根源是script标签的type="application/json"属性完全错误。这个属性会让浏览器把Bootstrap的JavaScript脚本当成JSON格式解析，导致脚本无法正常加载执行，进而引发Popper相关错误（Bootstrap依赖Popper实现下拉定位）。

修复步骤 #

1. 修正Bootstrap脚本引入
   移除script标签中的type="application/json"属性，这是完全多余且错误的配置。正确的引入代码应该是：

   <script
     src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" 
     integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" 
     crossorigin="anonymous">
   </script>
   

   注意：bootstrap.bundle.min.js已经内置了Popper，不需要再单独引入Popper的脚本，否则会导致冲突。

2. 移除重复的脚本引入
   检查页面中是否同时存在单独引入Popper和Bootstrap的代码，如果有，删除其中一组，只保留bundle版本的引入即可。

3. 验证Dropdown结构（可选）
   确认两个Dropdown的HTML结构符合Bootstrap 5规范：

   • 导航栏Dropdown：父元素li带有nav-item dropdown类，触发按钮带有nav-link dropdown-toggle和data-bs-toggle="dropdown"属性，结构正确。
   • 主体Dropdown：父容器带有dropdown类，触发链接带有data-bs-toggle="dropdown"属性，结构也符合要求。

完成以上步骤后，两个Dropdown应该都能正常工作，控制台的Popper错误也会消失。

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