Drupal Behaviors uncaught reference error

Question

I'm using Drupal 8.

What I'm trying to do is:

• Access the active node
• From the node get the value of field_test and assign it to a variable
• Pass the variable to the drupalSettings function and subsequently to a custom module 'mycustommodule' that triggers an alert

In my content type, I created a field_test field, which is the field I reference in my code. The block is placed on a page of this content type.

This is the JavaScript code I am using.

mycustomblock.libraries.yml

custom:
  version: 1.x
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery
    - core/drupalSettings

custom.js

(function ($, Drupal, drupalSettings) {
  Drupal.behaviors.mycustomblock = {
    attach: function (context, settings) {
      var testMe = drupalSettings.mycustomblock.test;
      alert(testMe);

  }
};
})(jQuery, Drupal, drupalSettings);

The error I get from the JavaScript console is this.

The error message is referring to this line.

Why is the instance of Drupal in the closing parenthesis throwing this error?

Answer 1

You will have to add the core library core/drupal to your library dependencies. This assures, that the Drupal core JavaScript is loaded before your custom module's JavaScript will be executed.

So your mycustomblock.libraries.yml should look like:

custom:
  version: 1.x
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery
    - core/drupal
    - core/drupalSettings