CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapbootstrap-4popper.js
hamncheez
hamncheez

Reputation: 739

jquery is not defined popperjs line 2325 when used with bootstrap4

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.

Upvotes: 0

Views: 2917

Answers (2)

Adim Victor
Adim Victor

Reputation: 104

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>

Upvotes: 3

Fez Vrasta
Fez Vrasta

Reputation: 14815

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.

Upvotes: 3

Related Questions