在使用 Bootstrap 的 dropdown 组件时，若控制台报错提示需要 Popper.js，通常是因为缺少依赖库。通过 npm 安装 popper.js 后，需特别注意引入 node_modules 中 dist 目录下的 umd 文件夹内的 popper.js 文件，而非 esm 版本，否则可能导致组件仍无法正常工作。
问题背景与描述
近期在学习 Bootstrap 框架时，遇到一个常见但官方文档未详细阐述的问题，特此整理分享。
具体表现为：在使用 Bootstrap 的 dropdown 下拉菜单组件时，页面加载后点击触发，控制台抛出错误信息：error：Bootstrap dropdown require Popper.js。
涉及的基础 Bootstrap 代码结构如下，任何包含 dropdown 组件的代码均可能触发此问题：
解决方案与排查过程
<ul class="nav nav-tabs">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="button" aria-haspopup="true" aria-expanded="false">Animation</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a>
<a class="dropdown-item" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a>
<a class="dropdown-item" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a>
</div>
</li>
</ul>根据错误提示，核心原因是未正确引入 Popper.js 依赖库。查阅相关资料后，建议在项目根目录下通过 npm 执行以下命令进行安装：npm install --save popper.js
安装完成后，在项目目录中会生成 node_modules 文件夹。此时需要将 popper.js 文件引入到 HTML 页面中。
保存好刷新网页再试了一下，发现还是不行，仍报了刚才的错误。于是我检查了一下node_modules->dist文件夹下的popper.js文件，发现有3个这样的文件（esm和umd文件夹下也各有一个popper.js文件）。再于是我把它们分别引入后再操作一下dropdown部件，最后在引入umd文件下的popper.js后^_^,bingo--终于是可以用了YY。虽然不知道为啥会这样，但也算是成功解决了问题。
参考相关 GitHub issue 链接：https://github.com/twbs/bootstrap/issues/23381
总结
以上介绍了 Bootstrap dropdown 组件报错 require Popper.js 的解决方法。希望本文能帮助大家解决类似问题，如有任何疑问欢迎留言，小编会及时回复。感谢大家对本站的支持！