Custom module javascript Drupal.behaviours doesn't seems to load

Question

I have a custom module which has a javascript file. Here's the content of the javascript file:

(function ($, Drupal) {
    Drupal.behaviors.promotionalOverlayBlock = {
        attach: function(context, settings) {
            console.log("hello world")
        }
    };
})(jQuery, Drupal);

The location of javascript file:

mymodule/js/overlayblock.js

In my mymodule.libraries.yml file it has the following:

mymodule:
  js:
    js/overlayblock.js: {}
  dependencies:
    - core/jquery
    - core/jquery.once
    - core/drupalSettings

When I load my drupal page, I expecting to see the "hello world" in the browser console. However, nothing show up. I view the page html code and search for my javascript there, but I can't seems to find anything related to my javascript file.

What could be the problem here?

Here's how I attached my library through the hook_preprocess_block() I'm not sure if this is the right place to add the attached.

function mymodule_preprocess_block(&variables){
  $variables['#attached']['library'][] = 
  'mymodule/overlayblock';
}

Answer 1

When attached make sure to use the correct name of the "library"

Inside your mymodule.libraries.yml file. The first line is your library name.

I use a different name inside my library file, and I attached a wrong library name.

 function mymodule_preprocess_block(&variables){
     $variables['#attached']['library'][] = 
      'mymodule/mylibraryname';
 }

My library file mymodule.libraries.yml

mylibraryname:
  js:
    js/promotional-overlay-block.js: {}
  dependencies:
    - core/jquery
    - core/jquery.once
    - core/drupalSettings

Answer 2

In Case if your library called mymodule, then attached shoud be as i described below

function mytheme_preprocess_block(&$variables) {
  if ($variables['elements']['#id'] == 'myblock') {
    $variables['#attached']['library'][] = 'module_name/mymodule';
  }
}