Why is jQuery dependency not working?

Question

I'm extending core Classy theme so I have included my JavaScript code in theme.libraries.yml file like this:

js:
  js/blogger-list.js: {}
dependencies:
  - core/jquery

but still browser console shows error: jQuery is not defined

blogger-list.js is really simple:

(function ($) {
  $(".views-col a").hover(function() {
    $(this).css('background','red');
  });
})(jQuery);

I'm using Drupal 8

What do I need to do?

Answer 1

First of all: DON'T EDIT ANY CORE FILE! EVER!!! Simply create a sub-theme or a very simple module to add your custom stuff.

---

I doubt a little bit that it really is this exact file that raises that error. But if so (your theme.libraries.yml looks incomplete somehow), please try to follow the docs as close as possible and use Drupal.behaviors to add JS functionality. See JavaScript API overview.

MYMODULE/MYTHEME.libraries.yml

foobar:
  js:
    js/blogger-list.js: {}
  dependencies:
    - core/jquery
    - core/jquery.once

js/blogger-list.js

(function ($, Drupal) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      $('.YOUR-VIEW-ID-OR-WHATEVER', context).once('myCustomBehavior').each(function () {

        $(".views-col a").hover(function () {
          $(this).css('background', 'red');
        });

      });
    }
  };
})(jQuery, Drupal);

And last but not least don't forget to attach your library to a render array or your theme's info file. See Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 theme.