0

In Drupal 9, I put the following JavaScript code for an image slider and a mobile navigation into a script.js file.

(function($, Drupal, drupalSettings) {
  
  Drupal.behaviors.swiper = {
    attach: function(context, settings) {
      var mainSwiper;
      mainSwiper = new Swiper(".swiper-container", {
        init: false,
        rewind: settings.slide_is_rewind == "0" ? false : true,
      });
      mainSwiper.init();
      // some more code for the slider
    },
  };

  Drupal.behaviors.mobilenav = {
    attach: function(context, settings) {

      $(".mobile-nav-icon").on("click", function(e) {
        console.log('mobile icon clicked');
        // some more code
      });
    },
  };

})(jQuery, Drupal, drupalSettings);

While the slider works great, the part of the mobile navigation isn't working as expected. It works only on pages with a slider. In the browser console, this error is thrown out.

Uncaught ReferenceError: jQuery is not defined

What's wrong with my code?

In case the issue has to do with my libraries.yml, this is its content.

global-styling:
    version: 1.x
    css:
      theme:
        css/variables.css: {}
        css/layout.css: {}
    js:
      js/script.js: {}
  global-scripts:
    version: 1.x
    js: 
      js/navmenu.js: {}
  
  
  custom_swiper:
    version: VERSION
    css:
      theme:      
        css/swiper-bundle.min.css: { weight: -100 }
    js:
      js/swiper-bundle.min.js: {}
    dependencies:
      - core/jquery
      - core/drupal
      - core/drupalSettings
      - core/jquery.once

1 Answer 1

3

Your inconsistent results are because core/jquery is being included on some pages by other libraries, and in these cases everything works fine, but you're seeing errors when there is no other library requiring core/jquery.

You have three libraries defined in your libraries.yml, however only one of them, custom_swiper, has dependencies defined. Dependencies need to be defined for each library individually. You need to add core/jquery as a dependency of the library that script.js is part of; per your code, this is the global-styling library.

global-styling:
  version: 1.x
  css:
    theme:
      css/variables.css: {}
      css/layout.css: {}
  js:
    js/script.js: {}
  # ADD DEPENDENCIES
  dependencies:
    - core/jquery
    - etc...

Additionally, a library can require other custom libraries defined in the same module or theme - libraries do not automagically include other libraries defined in the same libraries.yml file. I.e. if your global-styling library depends on your other library, custom_swiper, it will need to be added as a dependency as well. For example:

global-styling:
  version: 1.x
  css:
    theme:
      css/variables.css: {}
      css/layout.css: {}
  js:
    js/script.js: {}
  # ADD DEPENDENCIES
  dependencies:
    - core/jquery
    - my_module/custom_swiper
    - etc...

For more information, see the Adding assets (CSS, JS) to a Drupal theme via *.libraries.yml docs on d.o.

3
  • Thank you! After adding - core/jquery and - themename/custom_swiper as dependencies, it works. But I don't understand, why it's necessary to add - themename/custom_swiper at all. In Drupal.behaviors.mobilenav there are jQuery commands only, so I would have guessed that adding core/jquery is enough.
    – Madam Adam
    Jun 12, 2022 at 15:36
  • 1
    You may not need to add my_module/custom_swiper. I only noted it because I noticed one of your behaviors in script.js was called swiper, and I wanted to make sure you knew that it wouldn't be automatically included. If your code in script.js is unrelated to the my_module/custom_swiper library, but you're having issues when you don't depend on it, then the issue is likely that script.js depends on one or more of the other dependencies defined for custom_swiper and you should update your global-styling library to depend on those other dependencies directly.
    – sonfd
    Jun 12, 2022 at 17:26
  • OK, thanks, I got it!
    – Madam Adam
    Jun 12, 2022 at 21:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.