Topic: Uncaught TypeError: Bootstrap's dropdowns require Popper.js
I am unable to open a drop down.
When I try to open the dropdown, I get the following error on the console and the dropdown does not open:
Uncaught TypeError: Bootstrap's dropdowns require Popper.js (https://popper.js.org/)
show dropdown.js:153
toggle dropdown.js:126
_jQueryInterface dropdown.js:363
jQuery 2
_jQueryInterface dropdown.js:350
<anonymous> dropdown.js:515
jQuery 8
<anonymous> alert.js:154
<anonymous> bootstrap.min.js:6
<anonymous> bootstrap.min.js:6
dropdown.js:153:14
show dropdown.js:153
toggle dropdown.js:126
_jQueryInterface dropdown.js:363
jQuery 2
_jQueryInterface dropdown.js:350
<anonymous> dropdown.js:515
jQuery 8
<anonymous> alert.js:154
<anonymous> bootstrap.min.js:6
<anonymous> bootstrap.min.js:6
My dropdown looks as follows:
<div class='btn-group' id='ordinalType'>
<button type='button' class='btn btn-primary btn-xs'>Day(s)</button>
<button type='button' class='btn btn-primary btn-xs dropdown-toggle px-3' data-toggle='dropdown'
aria-haspopup='true' aria-expanded='false'>
<span class='sr-only'>Toggle Dropdown</span>
</button>
<div class='dropdown-menu'>
<a class='dropdown-item' href='#'>Day(s)</a>
<a class='dropdown-item' href='#'>Week(s)</a>
<a class='dropdown-item' href='#'>Month(s)</a>
<a class='dropdown-item' href='#'>Year(s)</a>
</div>
</div>
My includes are as follows:
<!-- SCR JQuery --><script type='text/javascript' src='/Musse/dist/jquery/jquery.min.js'></script>
<!-- SCR Bootstrap --><script type='text/javascript' src='/Musse/dist/bootstrap/js/bootstrap.min.js'></script>
<!-- SCR MDBootstrap --><script type='text/javascript' src='/Musse/dist/mdb/js/mdb.min.js'></script>
<!-- SCR MDB Calendar --><script type='text/javascript' src='/Musse/dist/mdb_calendar/js/addons/fullcalendar.min.js'></script>
What is causing this error and how do I fix it so my dropdowns work properly. FYI: If I try the exact same dropdown defintion shown above in your online snippet tool it works fine so it appears to be specific to the way I've set up the includes.
Hi,
Your console says that you don't have Poppers.js imported which is obligatory for Dropdown component to work. Looking at your imports I can say that indeed you haven't imported Popper.js file into your project. Also your jQuery import looks like it's not imported from our MDB Package. Our default imports for the MDB Pro package you are using are:
<!-- JQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
Importing necessary files properly should fix your problem.
Regards, Marcin
Adding popper (making no other changes) worked. Can I ask where that is documented; it is really difficult to find that information on your website? Why do I have to include JQuery from your library? How is it different from the distributed version?
Marcin Luczak staff commented 4 years ago
The documentation page of the Dropdown component has information about using Popper.js plugin. Also, few other components have use of this package so we import it to the project by default in our MDB Packages. Please see documentation: https://mdbootstrap.com/docs/b4/jquery/components/dropdowns/#menu-alignment
It is not obligatory to include jQuery from our library, but as we always attach the jQuery version that is compatible with our releases, we recommend to use the code that is already added with our packages.
Best, Marcin
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.19.2
- Device: PC
- Browser: Opera, Firefox, Edge
- OS: Windows 10
- Provided sample code: No
- Provided link: No