I'm trying to write a simple JQuery function in order to animate my mobile navigation. However, I'm not sure how to format the .js file. I've looked up some examples online, but I couldn't get my function to work, when I tried to use the example templates. Here's what I'm currently using, which works in Chrome, but FireFox logs an error, which I'll also post below:

My code:

(function ($, Drupal) {
        $( '#mobile-menu-toggle-button' ).click(function(){
          $( '.mobile-menu-toggle' ).toggleClass( "open" );
        $( '.overlay' ).click(function(e){
          if(e.target != this) return;
          $( '.mobile-menu-toggle' ).toggleClass( "open" );
})(jQuery, Drupal);

FireFox errors:

ReferenceError: Drupal is not defined

I'm thinking my formatting is off. Any help would be greatly appreciated.

  • 1
    Does your library have core/drupal as a dependancy?
    – Clive
    Jul 24, 2017 at 15:49
  • @Clive yes, dependencies: - core/jquery - core/jquery.once
    – Kellen
    Jul 24, 2017 at 15:59
  • So...by "yes" you mean "no" then? :)
    – Clive
    Jul 24, 2017 at 16:01
  • @Clive Lol. I apologize. I definitely misread your comment. That was it! Thanks! This is my first D8 project, so I'm learning the ropes. If you put your response in as an answer, I'll give you the credit.
    – Kellen
    Jul 24, 2017 at 16:39

1 Answer 1


D8 makes fewer assumptions about what you need in the page, so the Drupal JS library isn't included unless it's specified.

Just add

- core/drupal

as one of your library's dependancies, rebuild the cache, and all should be well.

Your Answer

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

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