Wednesday 28 September 2016

Drupal 8 'Uncaught ReferenceError: Drupal is not defined'

Doing an upgrade to archery club website, using a theme I found called Nexus. This theme has some responsive menu elements, which change the menu links on a desktop into a drop down select on small screen devices.
The theme also includes an image slider carousel on the home page, so a few select slides with image and title can be rotated around, with links to defined pages in the config.

This appears to work well and didn't have any problems with it during the early development of the pages, however, when it came to looking at the site on a mobile device I noticed that the mobile menu and slider were not showing at all.

After a little while I had not come up with any obvious solutions, thinking that it might be some sort of permissions issue on the images and the menu items. So I took a break, went off to archery to try and get my mind onto a different subject.

On returning to the problem, I have a thought that it might be to do with the responsiveness part of the theme, this leads me to an error in the console on Chrome telling me:
ReferenceError: Drupal is not defined
This points me to a line in the theme code where an object 'Drupal' is being referenced.

So there it is, searching the interwebs for something related leads me to some articles that describe the js dependencies for drupal 8 themes and how they are defined, and how to add jquery to pages using the theme library file.

http://sqndr.github.io/d8-theming-guide/javascript/behaviors.html
http://drupal.stackexchange.com/questions/109023/how-do-i-make-a-drupal-8-theme-require-jquery-for-anonymous-users
http://www.webmaster-forums.net/html-css-and-javascript/drupal-8-tip-debugging-javascript-error-uncaught-referenceerror-drupal-not-d

A quick change to the theme.libraries.yml file
dependencies:

  - drupal/drupal

  - core/jquery

Clearing all the caches

https://www.drupal.org/node/2598914

Then the mobile menus, and image sliders work absolutely fine.

1 comment:

  1. Thank you for this guide.
    Had the exact same problem. I put:
    [...]
    dependencies:
    - core/jquery
    - core/drupal.ajax
    - core/drupal
    - core/drupalSettings
    - core/jquery.once
    [...]
    in library file to make it work

    ReplyDelete