1

I'm stumped on this one. I’m having an issue where the drupalSettings object is empty when not logged in. Works fine when I am authenticated. - core/drupalSettings is in theme’s *.libraries.yml file.

I've tried

  • Cleared cache (1million times).
  • Triple checked the YAML indentation
  • Verified that the settings are being added when stepping through via Xdebug
  • The JS file that I'm adding is via ['# attached'] works great

What am I missing here? Where to start troubleshooting? I'll owe 🍻 if someone can help point me in the right direction.

themename.libraries.yml

views-load-more:
  js:
    js/views-load-more.js: {}
  dependencies:
    - core/drupalSettings

In my themename.theme

function themename_preprocess_views_view(&$variables) {
  if (!empty($variables["pager"])) {
    $view_selector = '.view-' . $variables["id"] . '.view-display-id-' . $variables["display_id"];
    $view_content_selector = $view_selector . ' .view-content';
    $view_pager_selector = $view_selector . ' .pager';

    $variables["view_array"]["#attached"]["library"][] = 'themename/views-load-more';
    $variables["view_array"]['#attached']['drupalSettings']['themename']['viewsLoadMore']['viewSelector'] = $view_selector;
    $variables["view_array"]['#attached']['drupalSettings']['themename']['viewsLoadMore']['viewContentSelector'] = $view_content_selector;
    $variables["view_array"]['#attached']['drupalSettings']['themename']['viewsLoadMore']['viewPagerSelector'] = $view_pager_selector;
  }
}

Note that the themename/views-load-morelibrary does get attached when anonymous (I can see the JS file within it).

And also note that this works perfectly when authenticated. This tells me that the drupalSettings dependency isn't working even though I'm declaring this.

How do I troubleshoot this?

4

Solved the issue... and the answer is weird...

within the html.html.twig file, we have a <div class="body-inner"> tag that wrapped the <js-bottom-placeholder token="{{ placeholder_token }}"> placeholder.

For whatever #drupalWTF reason, if this placeholder tag is wrapped inside of a div, drupalSettings will load an empty object. Once I moved it directly underneath the body tag, it worked fine.

Hope this helps someone!

  • You are a life saver, I've spent almost a week trying to understand what could be the issue! – Piero Jun 5 at 15:48
  • Oh wow, I had this too, but it was caused after design by an un-closed <strong> in a certain summarised (broken off after n characters) news item at the bottom of the page which caused the browser to wrap a <strong> around the the script elements in question resulting in the same problem (which especially manifested itself by a broken behaviour, namely Juicebox image gallery not loading). – Jochem Aug 11 at 16:36
0

Add core/drupal as a dependency.

themename.libraries.yml

views-load-more:
  js:
    js/views-load-more.js: {}
  dependencies:
    - core/drupal
    - core/drupalSettings
  • Good thought, but still no go. core/drupal was being loaded by a separate library. Just to be 100% certain, I added it as a dependency - but no luck. Thanks – mherchel Oct 13 '18 at 1:53
0

Tip: look for other javascript errors happening on the page. If a JS error happens before the the assignment of drupalSettings, it will not be initiated.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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