发表新帖
发表新帖

Bootstrap 4 popper is undefined

前端 未结
关注
2 1682
野趣味
野趣味 2021-01-25 11:46

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 b

相关标签:
2条回答
  • 自闭症患者
    2021-01-25 12:28

    try to import this order:

    1. jquery
    2. popper
    3. bootstrap

    for example: 

    <script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
    0 讨论(0)
  • 野趣味
    2021-01-25 12:36

    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
    0 讨论(0)
 看不清?
提交回复
热议问题