Bootstrap 4 Popper未定义 [英] Bootstrap 4 popper is undefined
问题描述
我正在尝试下拉菜单，每当我单击按钮时，我都会得到TypeError: popper is undefined.
I'm trying to get a dropdown going and whenever I click on the button I get TypeError: popper is undefined.
我尝试导入捆绑软件，而不是bootstrap
I tried importing the bundle instead of bootstrap
// import "bootstrap";
import 'bootstrap/dist/js/bootstrap.bundle.js';
我尝试先导入jquery
import "jquery";
import "bootstrap";
我也尝试导入popper
I tried importing popper as well
import "popper.js/dist/umd/popper.min.js";
import "jquery";
import "bootstrap";
我还尝试在其他任何脚本之前包含CDN的popper
I also tried including popper from a CDN before any other scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
即使我可以在控制台中访问Popper，我也几乎尝试了上面提到的任何导入组合，仍然出现此错误.
And I tried just about any combination of imports mentioned above, still getting this error, even when I can access Popper in the console.
<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>
然后我调用以下内容，因为它是动态生成的元素
I then call the following, since it's a dynamically generated element
$("#dd").dropdown();
我的问题与建议的问题不同，因为我解释说我已经尝试了所有建议的解决方案，但没有一个起作用.
My question is different than the suggested, because I explain that I already tried all of the suggested solutions and none worked.
推荐答案
解决方案:
您可以通过导入
<script src="/js/bootstrap.bundle.min.js"></script>
在此处中查看文档.
或使用 UDM 版本的popper，请参见下面的详细信息.
Or use the UDM Version of popper, see details below.
使用波普尔的步骤
我喜欢包裹经理.所以去了:
I like package managers. So here goes:
npm init
对所有事情都说是".
npm install bootstrap --save
npm install jquery --save
npm install popper.js --save
我用以下index.html文件创建了两个文件夹js和css:
I created two folders js and css with an index.html file as follows:
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文件
I then copied the files from the dist folder in various libraries located in node_modules to the css and js folders. With the exception of popper, use the popper.js file or popper.min.js file located in the dist/udm folder
index.html文件的内容如下:
The contents of the index.html file is as follows:
<!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服务器 通过运行
To run the example I used: http-server found here By running
npm install http-server -g
http-server
如果您尚未使用UDM版本，则 打开chrome并转到 http://127.0.0.1:8080 .调出我的页面，按F12，然后尝试按下拉菜单失败，并显示错误消息:
If you have not used the UDM version then Opening chrome and going to http://127.0.0.1:8080. Brings up my page, hitting F12 and then trying to press the dropdown fails with the error message:
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 版本或捆绑的引导程序版本，方法是从以下位置切换:
Either use the UDM version described above or the bundled bootstrap version by switching from:
<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>
工作.
实施的版本为:
- 引导程序:4.2.1
- jquery :3.3.1
- popper.js :1.14.6
- bootstrap: 4.2.1
- jquery: 3.3.1
- popper.js: 1.14.6
这篇关于Bootstrap 4 Popper未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
