在 Bootstrap 5 中创建下拉按钮时未捕获 TypeError答案

【问题标题】：Uncaught TypeError when creating a dropdown button in Bootstrap 5在 Bootstrap 5 中创建下拉按钮时未捕获 TypeError
【发布时间】：2021-09-08 00:17:29
【问题描述】：

我正在尝试使用 Bootstrap 5 创建下拉按钮，但出现错误：

未捕获的类型错误：t.createPopper 不是函数

这是我的 HTML 代码：

<div class="dropdown">
    <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown link
    </a>

    <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
</div>

这些是我正在使用的脚本：

<script src="assets/scripts/vendors/jquery-3.5.1.min.js"></script>
<script src="assets/scripts/vendors/popper.min.js"></script>
<script src="assets/scripts/vendors/bootstrap.min.js"></script>

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-5

【解决方案1】：

您可以使用 bootstrap.bundle.min.js 或 bootstrap.bundle.js 作为包含 Popper 的离线库。例如：-

<script src="src/jquery-ui.min.js"></script>
<script src="src/bootstrap.bundle.min.js"></script>

这解决了我的问题。希望这对某人有所帮助。

【讨论】：

可以确认使用bundle而不是单独导入popper.js和bootstrap.js修复问题。

【解决方案2】：

您的代码可以运行，但 Bootstrap 或 Popper 库可能不完整.. 使用 CDN 而不是离线库

Bootstrap官方文档:: https://getbootstrap.com/docs/5.0/getting-started/introduction/

JS Fiddle with CDN :: https://jsfiddle.net/9jbswr6d/1/

<html>
<head>
<!--official Bootstrap CDN-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0- 
beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384- 
giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" 
crossorigin="anonymous">
</head>
<body>
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" 
id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
</a>
  
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0- 
beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384- 
ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" 
crossorigin="anonymous"></script> 
</body>
</html>

【讨论】：

离线版本可防止通过中间人进行黑客攻击。这是正确的方法。
@RickyLevi First：我认为您不会因使用 CDN 而被黑客入侵。第二：我个人更喜欢 CDN，因为它们比离线库更快。离线图书馆需要快速托管到您的网站，否则速度会很慢。
世界已经改变，请阅读 owasp.org。几乎每家高科技公司都强烈建议不要使用 cdn 链接（仅用于测试/1 分钟编码示例，但从不用于生产）这是不安全的。链接：cheatsheetseries.owasp.org/cheatsheets/…。也许引导程序是您可能信任的东西。但即使使用integrity，他们的代码也可能会更改以收集信息或您不想要的东西。我只是把它写下来——让其他人知道和考虑。不是专门为你的答案 - 这就是我没有降级它的原因。
@RickyLevi 感谢您提供有用的信息。 :)

【解决方案3】：

问题出在 popper 版本上。我不知道他们做了什么，但使用最新版本的 popper，下拉菜单不再起作用。

我使用版本 1.14.3 使它在这个小提琴中工作：https://jsfiddle.net/e5n1astx/

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

我在上面使用的代码。我使用的 popper 版本链接：https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js

【讨论】：

【解决方案4】：

需要将popper js 导入到你的代码中。点击链接：https://popper.js.org/ 之后就可以正常使用了

<script src="https://unpkg.com/@popperjs/core@2"></script>

【讨论】：

考虑编辑您的答案以描述此答案如何解决问题中描述的问题。
请在不包含指向其他网站的链接的情况下，尽可能地尽量回答问题。您可以通过解释外部网站上所说的内容来做到这一点。

【解决方案5】：

这救了我：

<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<!--Bootsrap 4 CDN-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!--Fontawesome CDN-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<div class="dropdown">
   <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   Dropdown button
   </button>
   <div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
   </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>   
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

【讨论】：

请在您的回答中提供更多详细信息。正如目前所写的那样，很难理解您的解决方案。