jQuery Is Not Defined In Pattern Lab

November 1st, 2018  | Categories: Drupal, Drupal 8, JQuery, Pattern Lab

PROBLEM
I’ve been tasked with something very tedious. I’m to migrate Drupal 7 to Drupal 8. However, for the theme in Drupal 8 it has been decided we are going to use Pattern Lab. Specifically, using the Emulsify theme as a start.

I got lots of JavaScript errors on the Pattern Lab site to start. I needed to uncomment and create syslinks. Basically, follow the instructions in the \web\themes\custom\acf_enterprise\components\_meta\_01-foot.twig file.

After I got all that working, I proceeded to add jQuery to my branding bar file (located at \web\themes\custom\acf_enterprise\components\_patterns\02-molecules\menus\branding-bar\branding-bar.js).

Per the instructions, I uncommented the JavaScript so that it’s using Drupal behaviors as well. Ex.

(function ($, Drupal) {

    Drupal.behaviors.branding_bar = {
        attach: function (context) {

        }
    }
})(jQuery, Drupal);

Also make sure to include jQuery in the library for your theme on the Drupal 8 side… For example, my branding bar library (\web\themes\custom\my_theme\my_theme.libraries.yml) looks like this:

branding-bar:
  js:
    dist/02-molecules/menus/branding-bar/branding-bar.js: {}
  dependencies:
    - core/drupal
    - core/jquery

It works in Drupal 8! However, it does not in Pattern Lab (i.e. on /themes/custom/my_theme/pattern-lab/public/?p=viewall-molecules-menus).

Soooo… that’s the jist. And I’m getting a jQuery not defined error.

SOLUTION
Try googling this. NOTHING HELPFUL.

What they forget to mention is that you need to include jQuery in the footer of Pattern Lab. I.E in that \web\themes\custom\my_theme\components\_meta\_01-foot.twig file you have to muck around with to get other things to work.

My file now looks like this:

<!--DO NOT REMOVE-->
{{ patternLabFoot | raw }}

<!-- Drupal-specific usage -->
<!-- example using symlinking -->
<!-- cd web/themes/custom/emulsify/components/js -->
<!-- ln -s ../../../../../core/assets/vendor/domready/ready.min.js ./ -->
<!-- ln -s ../../../../../core/misc/drupal.js ./ -->

<!-- need to include jQuery!!! -->
<script src="../../js/jquery-2.0.0b2.js"></script>

<!-- UNCOMMENT AS NECESSARY -->
<script src="../../js/ready.min.js"></script>
<script src="../../js/drupal.js"></script>
<script src="../../js/debounce.js"></script>

<script src="../../../../dist/scripts-styleguide.js"></script>

<!-- If using Drupal.behaviors, uncomment for them to work in Pattern Lab -->
<script>Drupal.attachBehaviors();</script>

</body>
</html>

Notice the include of jquery-2.0.0b2.js. They forgot to mention to put that in there. JQuery now works on it so I should be good to go for about twenty minutes until I run into the next problem.

Also to note that their version of JQuery may not be the same one you’re used to. You may need to include the REAL version of JQuery in this footer file.

… I feel like I’m going to be updating this blog a lot since this theme and the impossible task of Pattern Lab has fallen entirely on my plate.

No comments yet.

TOP