Uncaught TypeError: Bootstrap's dropdowns require Poppe


Topic: Uncaught TypeError: Bootstrap's dropdowns require Popper.js

edwolfe asked 4 years ago

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.


Marcin Luczak staff answered 4 years ago

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


edwolfe answered 4 years ago

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


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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
Tags