1

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';
}
  • 1
    While you created all the files, you still need to load/call/attach the library somewhere. That somewhere depends on where you want this to load at. Every page? a specific page? every form? specific form? etc... – No Sssweat May 29 at 5:23
  • That's correct @NoSssweat It's suppose to load on a page where I assigned my block to it. I can see the block on that page, but the javascript file doesn't seems to load. I'm wondering if there's anything to configure apart from the above. – fkaufusi May 29 at 5:38
  • 1
    @fkaufusi did you attach library mymodule/mymodule to that block? Can you show your code how you did that? If you don't, what type of block do you use, Plugin Block or Entity Block? The approaches for them will be different. – Niklan May 29 at 6:03
  • @Niklan thanks for mentioning that "attach" I just added that attached now. Edited the question to add more info. Do you think the hook_preprocess_block() is the correct place to add the "attach"? – fkaufusi May 29 at 6:46
  • First of all. What "block" do you use? It's Plugin Block or you created it via admin interface? Those block types are different and have different approaches to attach library, your example is for block template (affects all block on the site, which is not good). Second, you attach the library mymodule/overlayblock. The library naming is [module_name]/[library_name]. In your mymodule.libraries.yml you named library as mymodule, so you must attach mymodule/mymodule library. – Niklan May 29 at 7:10
3

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
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';
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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