使用Bootstrap 4搭配Popper.js时触发TypeError错误求助

你遇到的Uncaught TypeError: n is not a constructor错误核心原因是版本不兼容：Bootstrap 4仅支持Popper.js v1.x系列，你当前引入的是Popper.js v2.9.3，这个版本和Bootstrap 4的popover组件不兼容。

修复步骤： #

• 替换Popper.js的引入链接为v1.x版本（比如v1.16.1，这是Bootstrap 4官方推荐的兼容版本）
• 确保库的加载顺序保持：jQuery → Popper.js → Bootstrap JS（这个顺序不能错）

修正后的完整代码： #

<div class="container">
  <div class="form-group">
    <label for="discord_tag">Discord Tag</label>
    <i class="fas fa-info-circle info-icon" data-toggle="popover" data-content="Your Discord ID with @, for example, @mrsheep1647"></i>
  </div>
</div>

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<!-- 替换为Popper.js v1.x兼容版本 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script>
$(function() {
  $('[data-toggle="popover"]').popover({
    trigger: 'hover click'
  });
});
</script>

额外说明： #

如果需要使用Popper.js v2，你需要升级到Bootstrap 5，因为Bootstrap 5才开始原生支持Popper.js v2版本。

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