My dropkick js is loaded but javascript says dropkick is not a function

Question

I loaded dropkick js and I can confirm it when I load the page a view page source

<script src="/core/assets/vendor/jquery/jquery.min.js?v=3.2.1"></script>
<script src="/core/assets/vendor/jquery/jquery-extend-3.4.0.js?v=3.2.1"></script>
<script src="/themes/custom/amarula/assets/libs/dropkick.min.js?q8gncy"></script>
<script src="/themes/custom/amarula/assets/js/main.js?q8gncy"></script>
<script src="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

Below is what i have in my yml file:

global-css:
  css:
    theme:
      assets/css/style.css: {}
      assets/css/libs/dropkick.css: {}
      //cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css: {}

global-js:
  js:
    assets/libs/dropkick.min.js: {minified: true}
    assets/js/main.js: {}
    //cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js: {}
  dependencies:
    - core/jquery

In my main.js:

$('.serve-amount').dropkick();

and here is my select tag:

<select name="serve-amount" class="serve-amount">
  <option value="{{ content.field_recipe_serve_amount }}">{{ content.field_recipe_serve_amount }}</option>
</select>

when inspect the page I see the following error:

jquery.min.js?v=3.2.1:2 Uncaught TypeError: $(...).dropkick is not a function

How can I use dropkick in my select tag?

score 0 · Answer 1 · answered Apr 08 '20 at 12:29

Assuming assets/js/main.js is your own additional JS file.

Can you try splitting up yours and the third party library and then add that dropkick.js as a dependency:

global-js:
  js:
    assets/js/main.js: {}
    //cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js: {}
  dependencies:
    - core/jquery
    - your_module/dropkick.js

dropkick.js:
  js:
    assets/libs/dropkick.min.js: {minified: true}
  dependencies:
    - ...

My dropkick js is loaded but javascript says dropkick is not a function

1 Answers1