Need some help with your project? Contact me

Drupal 8: core javascript files for anonymous users

Drupal 8 comes with many performance improvements, one of which being that javascript is no longer indiscriminately loaded on every page. This means that for anonymous users, there are many pages where there is no jQuery or even javascript loaded.

Although this is a good thing, sometimes you do need jQuery (for example to use Ajax, in which case you'd also need other scripts). So how do you load these files? One way is to use hook_page_attachments() to #attach your own library to the page. However, this is only recommended if the assets you need to attach do not apply to something specific, but to the entire page. The recommended way is to attach the library to a render array because then it will only get loaded if necessary.

And if we look at the documentation page for assets, we'll see how we can add our own library. We need to create a my_module.libraries.yml or my_theme.libraries.yml file. And inside, we can add the following:

  version: VERSION
    js/scripts.js: {}
    - core/jquery
    - core/drupal.ajax
    - core/drupal
    - core/drupalSettings
    - core/jquery.once

Where my_scripts will be the name of the library we will reference when attaching.

As you can see, we are not including any javascript or css of our own, we are just making use of the dependency scripts provided by core. So then what is left to do is to attach this library to a render array (or to the entire page if that is your use case):

$render_array['#attached']['library'][] = 'my_module/my_scripts';

Hope this helps.


Hello ,
I have added libraried in file. but not able to access my css abd js files. Not able to create my custom themes.

Why would you not hold your cup right!

LOL. Because the handle was so tiny :)

Can you help me understand where I would add this code to my header in Drupal 8. I need to add it so that I can use their booking widget

 (function() { var co=document.createElement("script"); co.type="text/javascript"; co.async=true; co.src=""; var s=document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(co, s); })(); 

Thanks for this tip.. you saved my day. I couldn't figure out why my ajax buttons were working for logged-in users but not for anonymous users!

Add new comment

You can post comments in Markdown and basic HTML tags.
For code blocks, wrap your code within '~~~'. For example:
$var = 'my variable';