0

I have a custom module and in it's .module file I add a value to Drupal settings:

  $variables['#attached']['drupalSettings']['my module']['color_body'] = '#dd0000';

I have a named js function and try to access the value:

function loadcal() {
  var backgroundColor = drupalSettings.mymodule.color_body;
}

I receive the error:

Uncaught TypeError: Cannot read properties of undefined (reading 'my module')
at Object.attach (loadcal.js?rb7yo3:52:37)

All of the working examples of using drupalSettings seem to be with anonymous functions:

(function ($) {}

I can refactor to do this as a DOMready function, but would prefer this function to be callable. I have tried:

(function loadcal($) {}

but that leaves loadcal() not being found when it is called.

UPDATE

I decided I could do without the function being named. I could pass what I needed at the start and not have to make subsequent calls. Here is the code involved:

mymodule.libraries

mymodule.calendar:
  css:
    component:
      css/calendar.css: {}
  js:
    js/loadcal.js: { weight: -18 }
  dependencies:
    - core/Drupal
    - core/jQuery
    - core/drupalSettings

mymodule.module

function mymodule_preprocess_node($variables) {
  $config = \Drupal::config('mymodule.settings');
  $variables['#attached']['library'][] = 'mymodule/mymodule.calendar';
  $variables['#attached']['drupalSettings']['mymodule']['color_body'] = '#dd0000';
}

loadcal.js

(function (Drupal, drupalSettings, once) {
  Drupal.behaviors.mymodule = {
    attach: function (context, settings) {
      var calendar = new FullCalendar.Calendar(calendarEl, {
        dayCellDidMount: ({date, el}) => {
          el.style.backgroundColor = drupalSettings.mymodule.color_body;
        }
      }
   }
)}

The console error is:

Uncaught TypeError: Cannot read properties of undefined (reading 'color_body')

though when checking drupalSettings, and settings under Closure (attach), or Closure.drupalSettings, mymodule isn't there, though it shows up under Drupal.behaviors.

8
  • Why the space in 'my module'?
    – Clive
    May 1, 2022 at 20:55
  • The exception message doesn't match the shown code. With drupalSettings.mymodule, it should not complain about reading the my module property of undefined.
    – apaderno
    May 1, 2022 at 21:00
  • 1
    You can either use (function ($) { /* code */ })(jQuery) or (function loadcal($) { /* code */ })(jQuery). The latter would be helpful if that function calls itself (which doesn't usually happen with Drupal behaviors).
    – apaderno
    May 1, 2022 at 21:20
  • This will probably come down to how you're including the JS in the page or how/when you're invoking loadcal()
    – Clive
    May 1, 2022 at 21:31
  • @Clive Yes, that's true. We need to see more code, but so far this seems a plain JavaScript question.
    – apaderno
    May 1, 2022 at 21:39

0

Your Answer

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

Browse other questions tagged or ask your own question.