Bootstrap 4 popper 未定义

Question

我正在尝试打开下拉菜单，每当我单击该按钮时，我都会得到 TypeError: popper is undefined。

我尝试导入包而不是 bootstrap

// import "bootstrap";
import 'bootstrap/dist/js/bootstrap.bundle.js';

我先尝试导入 jquery

import "jquery";
import "bootstrap";

我也尝试导入 popper

import "popper.js/dist/umd/popper.min.js";
import "jquery";
import "bootstrap";

我还尝试在任何其他脚本之前包含来自 CDN 的 popper

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

我几乎尝试了上述任何导入组合，仍然出现此错误，即使我可以在控制台中访问 Popper。

<div class="d-flex justify-content-between dropdown luri-eayq">
   <a href="/messages" class="btn btn-light flex-1 py-3 rounded-0">
      Messages
   </a>
   <a href="/phonebook" class="btn btn-light flex-1 py-3 rounded-0">
      Phonebook
   </a>
   <button id="dd" class="btn btn-light flex-1 py-3 rounded-0 mt-0" data-toggle="dropwdown">
      More
   </button>
   <div class="dropdown-menu"><a class="dropdown-item" href="/problems">Problems</a></div>
</div>

然后我调用以下内容，因为它是一个动态生成的元素

$("#dd").dropdown();

我的问题与建议的不同，因为我解释说我已经尝试了所有建议的解决方案并且 none 有效。

Answer 1

尝试导入此订单：

jquery
波普尔
bootstrap

例如：

<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Answer 2

解法：

您可以通过导入

使用捆绑的 bootstrap popper

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

请参阅文档 here。

或者使用UDM版本的popper，详见下文。

使用popper的步骤

我喜欢包管理器。所以这里是：

npm init

对一切都说是..

npm install bootstrap --save
npm install jquery --save
npm install popper.js --save

我用 index.html 文件创建了两个文件夹 js 和 css，如下所示：

 index.html
 package.json
 package-lock.json
 |_ js
 |_ css
 |_ node_modules
     |_ bootstrap
       |_ dist
     |_ jquery
       |_ dist
     |_ popper.js
       |_ dist
          |_udm
          |_esm

然后我将文件从位于 node_modules 的各个库中的 dist 文件夹复制到 css 和 js 文件夹。除 popper 外，使用位于 dist/udm 文件夹中的 popper.js 文件或 popper.min.js 文件

index.html文件内容如下：

<!DOCTYPE html>
<html class="no-js" lang="en">
    <head>
        <title>Popper Test</title>
        <link rel="stylesheet" href="/css/bootstrap.min.css">
    </head>

    <body>

            <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" aria-labelledby="dropdownMenuButton">
                      <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="/js/jquery.min.js"></script>
        <script src="/js/popper.js"></script>
        <script src="/js/bootstrap.min.js"></script>
        <!-- <script src="/js/bootstrap.bundle.min.js"></script> -->
    </body>
</html>

对运行我用的例子：找到 http 服务器 here 通过运行宁

npm install http-server -g
http-server

如果你没有使用过UDM版本那么 打开 chrome 并前往 http://127.0.0.1:8080。打开我的页面，按 F12 然后尝试按下拉菜单失败并显示错误消息：

bootstrap.min.js:6 Uncaught TypeError: Bootstrap's dropdowns require Popper.js (https://popper.js.org/)
    at c.t.toggle (bootstrap.min.js:6)
    at HTMLButtonElement.<anonymous> (bootstrap.min.js:6)
    at Function.each (jquery.min.js:2)
    at w.fn.init.each (jquery.min.js:2)
    at w.fn.init.c._jQueryInterface [as dropdown] (bootstrap.min.js:6)
    at HTMLButtonElement.<anonymous> (bootstrap.min.js:6)
    at HTMLDocument.dispatch (jquery.min.js:2)
    at HTMLDocument.y.handle (jquery.min.js:2)

要么使用上述 UDM 版本，要么使用捆绑的 bootstrap 版本，方法是切换自：

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

至：

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

有效。

实施的版本是：

bootstrap: 4.2.1
jquery: 3.3.1
popper.js: 1.14.6

Bootstrap 4 popper 未定义

Bootstrap 4 popper is undefined

html

javascript

bootstrap-4

popper.js