Bootstrap 4 popper 未定义 [英] Bootstrap 4 popper is undefined

查看：30
本文介绍了Bootstrap 4 popper 未定义的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试创建一个下拉菜单，每当我点击按钮时，我都会收到 TypeError: popper is undefined.

我尝试导入包而不是 bootstrap

//导入引导程序"；导入 'bootstrap/dist/js/bootstrap.bundle.js';

我尝试先导入 jquery

import "jquery";导入引导程序"；

我也尝试导入 popper

import "popper.js/dist/umd/popper.min.js";导入jquery"；导入引导程序"；

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

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

而且我几乎尝试了上面提到的任何导入组合，仍然出现此错误，即使我可以在控制台中访问 Popper.

<a href="/messages" class="btn btn-light flex-1 py-3 rounded-0">留言</a><a href="/phonebook" class="btn btn-light flex-1 py-3 rounded-0">电话簿</a><button id="dd" class="btn btn-light flex-1 py-3 rounded-0 mt-0" data-toggle="dropwdown">更多的<div class="dropdown-menu"><a class="dropdown-item" href="/problems">问题</a></div>

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

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

我的问题与建议的不同，因为我解释说我已经尝试了所有建议的解决方案，但没有一个奏效.

解决方案

解决方案:

您可以通过导入使用捆绑的 bootstrap popper

在此处查看文档.

或使用 UDM 版本的 popper，请参阅下面的详细信息.

使用 popper 的步骤

我喜欢包管理器.所以这里是:

npm 初始化

对一切都说是..

npm install bootstrap --savenpm 安装 jquery --savenpm install popper.js --save

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

 index.html包.json包锁.json|_js|_ css|_ 节点模块|_ 引导|_ 距离|_ jQuery|_ 距离|_ popper.js|_ 距离|_udm|_esm

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

index.html文件内容如下:

<html class="no-js" lang="en"><头><title>波普尔测试</title><link rel="stylesheet" href="/css/bootstrap.min.css"><身体><div class="下拉"><button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">下拉按钮<div class="下拉菜单" aria-labelledby="dropdownMenuButton"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">另一个动作</a><a class="dropdown-item" href="#">这里还有别的东西</a>

<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>-->

要运行我使用的示例:http-server 找到 此处通过运行

npm install http-server -ghttp服务器

如果您还没有使用过 UDM 版本，那么打开 chrome 并转到 http://127.0.0.1:8080.调出我的页面，按 F12，然后尝试按下下拉菜单失败并显示错误消息:

bootstrap.min.js:6 Uncaught TypeError: Bootstrap 的下拉菜单需要 Popper.js (https://popper.js.org/)在 c.t.toggle (bootstrap.min.js:6)在 HTMLButtonElement.<匿名>(bootstrap.min.js:6)在 Function.each (jquery.min.js:2)在 w.fn.init.each (jquery.min.js:2)在 w.fn.init.c._jQueryInterface [作为下拉菜单] (bootstrap.min.js:6)在 HTMLButtonElement.<匿名>(bootstrap.min.js:6)在 HTMLDocument.dispatch (jquery.min.js:2)在 HTMLDocument.y.handle (jquery.min.js:2)

使用上述 UDM 版本或从以下位置切换的捆绑引导程序版本:

<script src="/js/popper.js"></script><script src="/js/bootstrap.min.js"></script><!-- <script src="/js/bootstrap.bundle.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

I'm trying to get a dropdown going and whenever I click on the button I get TypeError: popper is undefined.

I tried importing the bundle instead of bootstrap

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

I tried importing jquery first

import "jquery";
import "bootstrap";

I tried importing popper as well

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

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>

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.

解决方案

Solution:

You can use the bundled bootstrap popper by importing 

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

See the documentation here.

Or use the UDM Version of popper, see details below.

Steps to use popper

I like package managers. So here goes:

npm init

Just say yes to everything..

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

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

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

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>

To run the example I used: http-server found here By running 

npm install http-server -g
http-server

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)

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> -->

to :

<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>

Works.

Versions implemented were:

  • bootstrap: 4.2.1
  • jquery: 3.3.1
  • popper.js: 1.14.6

这篇关于Bootstrap 4 popper 未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆