Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

bootstrap.min.js:6 Uncaught Error: Bootstrap dropdown require Popper.js

Suddenly I started to get error when I try to open my dropdown menu :

 bootstrap.min.js:6 Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org)         at bootstrap.min.js:6         at bootstrap.min.js:6         at bootstrap.min.js:6 

I am using standard bootstrap file

<script src="https://getbootstrap.com/dist/js/bootstrap.min.js">

Anything changed in bootstrap I have to take care off?

Order I am loading files is following

<script src="https://code.jquery.com/jquery-1.9.1.js"></script> <script src="{{ STATIC_URL }}/static/jquery/jquery-1.9.1.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script src="{{ STATIC_URL }}/static/jquery/jquery-ui.js"></script>     <script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script> <!-- Just to make our placeholder images work. Don't actually copy the next line! --> <script src="https://getbootstrap.com/assets/js/vendor/holder.min.js"></script> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <script src="https://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script> 
like image 205
Ilya Bibik Avatar asked Aug 13 '17 15:08

Ilya Bibik


People also ask

Does bootstrap require Popper js?

The "Bootstrap dropdown require Popper. js" error occurs when we use a Bootstrap component that requires the Popper. js script, but don't include the script on the page. To solve the error, include the Bootstrap bundle script, before running your JavaScript code.

Does bootstrap 5 require Popper?

Many of our components require the use of JavaScript to function. Specifically, they require our own JavaScript plugins and Popper.


2 Answers

In the introduction of Bootstrap it states which imports you need to add. https://getbootstrap.com/docs/4.0/getting-started/introduction/#quick-start

You have to add some scripts in order to get bootstrap fully working. It's important that you include them in this exact order. Popper.js is one of them:

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
like image 105
SeppeDev Avatar answered Nov 06 '22 18:11

SeppeDev


Instead of:

js/bootstrap.min.js 

use:

js/bootstrap.bundle.min.js 
like image 29
Shadi Namrouti Avatar answered Nov 06 '22 17:11

Shadi Namrouti