0

I'm using bootstrap 4.0 beta, which requires popperjs, which is v1.12.5 . jQuery is version 3.2.1, in jQuery.noConflict() mode. This is for a shopify theme, so to include javascript files it uses gulp-include directives in Shopify's Slate command-line tool. My include file looks like this:

// =require vendor/jquery-3.2.1.js
// =require vendor/popper.js
// =require vendor/bootstrap.min.js

When I try and use the Bootstrap Navbar dropdown toggle, I get the console error

Uncaught TypeError: Cannot read property 'jquery' of undefined

jQuery is working correctly in all the non-popper bootstrap functionality and custom jQuery javascript. However, jquery (with a lower-case q) is not defined when I type it in the console, but this is what popperjs uses on line 2325. If I edit the popperjs source and capitalize the q it still throws the same error.

hamncheez
  • 709
  • 12
  • 22

2 Answers2

3

You are passing an invalid DOM element to Popper.js somehow, if you update Popper.js to the latest version you'll get a better error message.

Fez Vrasta
  • 14,110
  • 21
  • 98
  • 160
  • 1
    We also faced this issue. Then later found out that with the "dropdown-toggle" class we were passing data-toggle="invalid dom". Once we removed data-toggle, it worked. – Raghu Jun 06 '18 at 06:43
3

For more context, You are getting this error because you are trying to use an invalid HTML element as your dropdown button. I got this error because i tried to use an anchor tag which had a button nested it, alongside the .dropdown-menu div

For example This works

<button class="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="#">Thing 1</a>
    <a class="dropdown-item" href="#">Thing 2</a>
    <a class="dropdown-item" href="#">Thing 3</a>
  </div>

But this doesn't

<a class="dropdown">
<button class="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="#">Thing 1</a>
    <a class="dropdown-item" href="#">Thing 2</a>
    <a class="dropdown-item" href="#">Thing 3</a>
  </div>
</a>
Adim Victor
  • 104
  • 6
  • The theme I was working on when the question was asked has been replaced, so I can't go back and look (and I work for a different company), but I'll take your word for it. – hamncheez Feb 14 '19 at 15:16