我正在尝试让下拉菜单继续运行，但每当我单击该按钮时，我都会收到 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();
我的问题与建议的不同，因为我解释说我已经尝试了所有建议的解决方案，但没有一个奏效。
最佳答案
解决方案:
您可以通过导入来使用捆绑的 bootstrap popper
<script src="/js/bootstrap.bundle.min.js"></script>
参见文档 here .
或者使用 UDM 版本的 popper，详见下文。
popper使用步骤
我喜欢包管理器。所以这里是:
npm init
对一切都说"is"..
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 版本，要么切换自:
<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
关于javascript - Bootstrap 4 popper 未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54397838/