Symfony var dump is not working in custome theme

Created on 3 March 2024, 8 months ago
Updated 28 July 2024, 3 months ago

Problem/Motivation

I am using drupal 10. I am trying to build a custom theme. I created the necessary info.yml and libraries.yml. To change the Main Navigation, I've created a file named menu--main.html.twig. In this file, I placed {{dump(items)}}. The output is in on a white surface and not collapsible (first image). But I am expecting the output in black surface and to be collapsible/ expandable.
In admin/config/development/devel, I've Symfony var-dumper enabled as Variables Dumper

in the console, I am getting this error:
Uncaught ReferenceError: Sfdump is not defined

Steps to reproduce

web\themes\contrib\quality_framework\quality_framework.info.yml

name: "Quality Framework"
type: theme
description: "A custom theme for the project Quality Framework"
core_version_requirement: ^10
base theme: false
package: Core
version: VERSION
libraries:
  - "quality_framework/global-styling"
regions:
  header: Header
  banner: Banner
  sidebar: Sidebar
  content: Content
  footer: Footer

web\themes\contrib\quality_framework\quality_framework.libraries.yml

global-styling:
  css:
    theme:
      css/style.css: {}
      css/bootstrap_5.min.css: {}
      scss/style.scss: {}
  js:
    js/bootstrap_5.bundle.min.js: {}

  dependencies:
    - core/drupal
    - core/once
    - core/tabbable
    - core/collapse

web\themes\contrib\quality_framework\templates\menu--main.html.twig

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  {% import _self as menus %}
  {% macro build_menu(items, attributes, menu_level) %}
    {{dump(items)}}
    {% if items %}
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        {% for item in items %}
          {{ menus.add_link(item, attributes, menu_level) }}
        {% endfor %}
      </ul>
    {% endif %}
  {% endmacro %}

  {% macro add_link(item, attributes, menu_level) %}

    {% set link_classes = ['nav-link'] %}
    {% if item.is_expanded %}
      {% set link_classes = link_classes|merge(['dropdown-toggle']) %}
      {% set attributes = attributes|merge({'aria-expanded': 'false'}) %}
    {% endif %}
    <li class="nav-item">
      <a href="{{ item.url }}" class="{{ link_classes|join(' ') }}" {{ attributes }}>
        {{ item.title }}
      </a>
      {% if item.below %}
        <ul class="dropdown-menu">
          {{ menus.build_menu(item.below, attributes, menu_level + 1) }}
        </ul>
      {% endif %}
    </li>
  {% endmacro %}

  {{ menus.build_menu(items, attributes, 0) }}
</div>
πŸ’¬ Support request
Status

Closed: outdated

Version

10.2 ✨

Component
Menu moduleΒ  β†’

Last updated 8 days ago

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024