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>
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.
Many of our components require the use of JavaScript to function. Specifically, they require our own JavaScript plugins and Popper.
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>
Instead of:
js/bootstrap.min.js
use:
js/bootstrap.bundle.min.js
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With