Shopify Question posted in
The Shopify help center can be found here.

jquery is not defined popperjs line 2325 when used with bootstrap4 – Shopify

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.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search