Bootstrap 5 - 未捕获类型错误：Popper__namespace.createPopper 不是函数
Sha*_*M13 52 javascript bootstrap-5
我正在使用 Django 来提供网页服务。
\n- \n
我试图确保我能够下载使网页功能按预期离线使用所需的所有资源（因为其中一个资源可能无法供我的客户请求，所以我希望能够让我的服务器提供这些文件，或者如果我决定在本地主机上的 Raspberry Pi 上运行该网站的副本或类似的东西）。其中之一是 bootstrap 5。
\n \n我正在尝试使用他们的下拉菜单功能......根据他们的文档：
\n\n
\n下拉菜单基于第三方库 Popper 构建，它提供动态定位和视口检测。确保在 Bootstrap\xe2\x80\x99s JavaScript 之前包含 popper.min.js 或使用包含 Popper 的 bootstrap.bundle.min.js / bootstrap.bundle.js 。Popper 不用于在导航栏中定位下拉菜单，但不需要动态定位。
\n \n因为我渴望找到解决方案，所以我插入了一堆
\n<script>标签试图排除问题......也许这是一个坏主意。 \n
接下来我可以尝试什么？
\n{% load static %}\n\n<html class="w-100 h-100">\n<head>\n <title>\n Fonts\n </title>\n\n <!--Important meta tags-->\n <!--Cancel zoom for mobile-->\n <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />\n <!--example:-->\n <!--href="{% static \'polls/style.css\' %}"-->\n\n <!--theme-->\n <link rel="shortcut icon" type="image/jpg" href="{% static \'Pages/favicons/CES.png\' %}"/>\n <link type="text/css" rel="stylesheet" href="{% static \'Pages/css/main.css\' %}">\n <script src="{% static \'Pages/js/main.js\' %}"></script>\n\n <!--jQuery-->\n <script src="{% static \'Pages/jQuery/jquery-3.6.0.js\' %}"></script>\n <script src="{% static \'Pages/jQuery/jquery-3.6.0.min.js\' %}"></script>\n <script src="{% static \'Pages/jQuery/jquery-3.6.0.slim.js\' %}"></script>\n <script src="{% static \'Pages/jQuery/jquery-3.6.0.slim.min.js\' %}"></script>\n\n <!--bootstrap related-->\n <link type="text/css" rel="stylesheet" href="{% static \'Pages/Bootstrap/bootstrap-5.0.2-dist/css/bootstrap.css\' %}">\n <link type="text/css" rel="stylesheet" href="{% static \'Pages/Bootstrap/bootstrap-5.0.2-dist/css/bootstrap.min.css\' %}">\n <script src="{% static \'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.bundle.js\' %}"></script>\n <script src="{% static \'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js\' %}"></script>\n <script src="{% static \'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.js\' %}"></script>\n <script src="{% static \'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.min.js\' %}"></script>\n\n <style>\n{% if fonts %}\n{% for font in fonts %}\n @font-face\n {\n{% if font.font_family %}\n font-family: "{{font.font_family}}";\n{% endif %}\n{% if font.path %}\n src: url("{{font.path}}");\n{% endif %}\n }\n{% endfor %}\n{% endif %}\n </style>\n\n</head>\n<body class="m-0 p-0 w-100 h-100">\n\n <button id="fonts" class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">\n <span class="visually-hidden">Fonts</span>\n </button>\n \n <ul class="dropdown-menu" role="menu" aria-labelledby="fonts">\n{% if fonts%}\n{% for font in fonts %}\n <li><div class="dropdown-item" style="font-family: \'{{font.font_family}}\'; text-align: center;">{{font.font_name}}</div></li>\n{% endfor %}\n{% endif %}\n </ul>\n\n</body>\n</html>\n
进一步阅读（来自http://5.9.10.113/65685854/dropdown-button-in-bootstrap-5-not-working）表明Popper的新版本实际上导致了这个问题。所以，我会多调查一下，看看我能做些什么。
\n编辑答案
\n仅出于测试目的，我从 Bootstrap 的下载页面添加了此代码片段，并且它按预期工作。从这里我浏览了所有 bootstrap 源（更不用说我折叠并添加了 Popper CDN）并发现我的 bootstrap.js 文件出了问题。
\n从 npm 获取最新的发行版（并将构建放入子目录供我使用）后，我也通过 npm 将 Popper CDN 与其对应的版本交换（我下载了它，进入了 node_modules/ @popper/core/... ，找到了 min 文件并引用了它）现在它运行良好。最后值得一提的是：仅使用 .MIN。文件！* 所以 popper.min.js、bootstrap.min.js、bootstrap.min.css... 标签中包含所有其他文件script将导致 Bootstrap 无法正常运行。
{% load static %}\n\n<html class="w-100 h-100">\n<head>\n <title>\n Fonts\n </title>\n\n <!--Important meta tags-->\n <!--Cancel zoom for mobile-->\n <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />\n <!--example:-->\n <!--href="{% static \'polls/style.css\' %}"-->\n\n <!--theme-->\n <link rel="shortcut icon" type="image/jpg" href="{% static \'Pages/favicons/CES.png\' %}"/>\n <link type="text/css" rel="stylesheet" href="{% static \'Pages/css/main.css\' %}">\n <script src="{% static \'Pages/js/main.js\' %}"></script>\n\n <!--jQuery-->\n <script src="{% static \'Pages/jQuery/jquery-3.6.0.js\' %}"></script>\n <script src="{% static \'Pages/jQuery/jquery-3.6.0.min.js\' %}"></script>\n <script src="{% static \'Pages/jQuery/jquery-3.6.0.slim.js\' %}"></script>\n <script src="{% static \'Pages/jQuery/jquery-3.6.0.slim.min.js\' %}"></script>\n\n <!--bootstrap related-->\n <link type="text/css" rel="stylesheet" href="{% static \'Pages/Bootstrap/bootstrap-5.0.2-dist/css/bootstrap.css\' %}">\n <link type="text/css" rel="stylesheet" href="{% static \'Pages/Bootstrap/bootstrap-5.0.2-dist/css/bootstrap.min.css\' %}">\n <script src="{% static \'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.bundle.js\' %}"></script>\n <script src="{% static \'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js\' %}"></script>\n <script src="{% static \'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.js\' %}"></script>\n <script src="{% static \'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.min.js\' %}"></script>\n\n <style>\n{% if fonts %}\n{% for font in fonts %}\n @font-face\n {\n{% if font.font_family %}\n font-family: "{{font.font_family}}";\n{% endif %}\n{% if font.path %}\n src: url("{{font.path}}");\n{% endif %}\n }\n{% endfor %}\n{% endif %}\n </style>\n\n</head>\n<body class="m-0 p-0 w-100 h-100">\n\n <button id="fonts" class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">\n <span class="visually-hidden">Fonts</span>\n </button>\n \n <ul class="dropdown-menu" role="menu" aria-labelledby="fonts">\n{% if fonts%}\n{% for font in fonts %}\n <li><div class="dropdown-item" style="font-family: \'{{font.font_family}}\'; text-align: center;">{{font.font_name}}</div></li>\n{% endfor %}\n{% endif %}\n </ul>\n\n</body>\n</html>\nDan*_*man 62
我收到此错误（TypeError: i.createPopper is not a function每次应显示弹出窗口时，以前，由于与其他脚本冲突，我不得不使用单独的 Popper 和 Bootstrap JS（选项 2）。然而，在我的项目中，使用 Bootstrap 5.1.1，这不再是必需的。
仅包括带有 popper 的 Bootstrap 捆绑包 - 根据上面 @Kevin 的评论 - 为我解决了这个问题 - 并且以前的冲突似乎不再是问题了。所有弹出窗口、工具提示、模式、侧边栏等现在似乎都可以正常工作：
<body>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
- 我现在面临同样的问题，正如 @Daniel 上面所说，我使用 bootstrap.bundle.min.js 而不是使用 Popper.js 和 Bootstrap.min.js 文件解决了我的问题。希望这可以帮助。 (6认同)
Jim*_*mmy 36
我包括bootstrap.min.js而不是bootstrap.bundle.min.js
- 这里基本一样。从 bootstrap.js 切换到 bootstrap.bundle.js。谢谢，吉米。 (7认同)
发生这种情况是因为 Bootstrap 5+ 使用 popper js 进行下拉菜单，并且需要在脚本源中声明 popper.js 或 popper.min.js，或者您可以使用 bootstrap.bundle.js （或 bootsrap.bundle.min.js） 。
因此，不要只使用：
<script src="[...YOUR_JS_CDN...]/bootstrap.min.js" />
在 bootstrap 之前添加 popper js：
<script src="[...YOUR_JS_CDN...]/popper.min.js" />
<script src="[...YOUR_JS_CDN...]/bootstrap.min.js" />
或者使用bootstrap.bundle：
<script src="[...YOUR_JS_CDN...]/bootstrap.bundle.min.js" />
在你的情况下，替换它（因为你在最后再次重新声明 bootstrap js ）：
<script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.bundle.js' %}"></script>
<script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.js' %}"></script>
<script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.min.js' %}"></script>
并且仅使用：
<script src="{% static 'Pages/Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.bundle.js' %}"></script>