Contrib.social

Debug attributes issues

Open on Drupal.org →
Created on 10 March 2025, about 2 months ago

Problem/Motivation

I am trying to convert my SDC components to work with UI Patterns.

I am struggling with this error message:

Drupal\Core\Render\Component\Exception\InvalidComponentException: [attributes] String value found, but an object is required in Drupal\Core\Theme\Component\ComponentValidator->validateProps() (line 203 of core/lib/Drupal/Core/Theme/Component/ComponentValidator.php).

These are difficult to troubleshoot and I want to ask for some help with how to approach these.

Previously, I have just removed any `attributes` props in my components.

But now I have a complex component with nested components. Even removing all nested components I still get the "[attributes] string value found .." exception.

Steps to reproduce

If I understood this I could probably find a solution, but here an excerpt:

region-header.html.twig

          {% include 'header.twig' with {
            is_front,
            active_language,
            header_menu,
          } only %}

header.twig

{% embed 'my_components:header' with {
} %}
{% endembed %}

my_components/components/header.component.yml

$schema: https://git.drupalcode.org/project/sdc/-/raw/1.x/src/metadata.schema.json
name: Header
props:
  type: object
  properties: {}

my_components/components/header.twig

<div{{ attributes.addClass("header") }}>
</div>
Drupal\Core\Render\Component\Exception\InvalidComponentException: [attributes] String value found, but an object is required in Drupal\Core\Theme\Component\ComponentValidator->validateProps() (line 203 of core/lib/Drupal/Core/Theme/Component/ComponentValidator.php).
Drupal\Core\Template\ComponentsTwigExtension->doValidateProps(Array, 'my_components:header') (Line: 110)
Drupal\Core\Template\ComponentsTwigExtension->validateProps(Array, 'my_components:header') (Line: 174)
__TwigTemplate_c66bd735bef21e8d7bcb996aa6416374___692438094->doDisplay(Array, Array) (Line: 388)
Twig\Template->yield(Array) (Line: 63)
__TwigTemplate_c66bd735bef21e8d7bcb996aa6416374->doDisplay(Array, Array) (Line: 388)
Twig\Template->yield(Array) (Line: 924)
__TwigTemplate_96b869eb9d8bd0d227e4ddd466a0b907___490765172->block_header(Array, Array) (Line: 432)
Twig\Template->yieldBlock('header', Array, Array) (Line: 124)
__TwigTemplate_ac02a7169598bf0844fd67f0fd02cc8c->doDisplay(Array, Array) (Line: 388)
Twig\Template->yield(Array, Array) (Line: 910)
__TwigTemplate_96b869eb9d8bd0d227e4ddd466a0b907___490765172->doDisplay(Array, Array) (Line: 388)
Twig\Template->yield(Array) (Line: 85)
__TwigTemplate_96b869eb9d8bd0d227e4ddd466a0b907->doDisplay(Array, Array) (Line: 388)
Twig\Template->yield(Array, Array) (Line: 344)
Twig\Template->display(Array) (Line: 359)
Twig\Template->render(Array) (Line: 51)
Twig\TemplateWrapper->render(Array) (Line: 37)
twig_render_template('themes/custom/mytheme/templates/layout/region--header.html.twig', Array, Array) (Line: 426)
...

Proposed resolution

Guidance on how to define attributes, use {% embed only %}

Remaining tasks

User interface changes

API changes

Data model changes

💬 Support request
Status

Active

Version

2.0

Component

Documentation

Created by

miiimooo Europe

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

Comments & Activities

  • Issue created by @miiimooo
  • Comment about 2 months ago →
    🇫🇷France pdureau Paris

    [attributes] string value found .."

    This issue is well known.

    Your attributes value is going through the SDC validator, which is normal when using UI Patterns 2.

    But the validator receive a PHP object which is casted as a string and raise an error because it doesn't expects a string, and this is not normal because UI Patterns 2 is preventing that.

    What is happening if you skip header.twig and call directly your component from region-header.html.twig ?

    Also, it is better to use "with_context: false" with {% embed 'my_components:header' ...

  • Comment about 1 month ago →
    miiimooo Europe

    I am not sure how to solve this. Ah it's because I'm using the patch here 🐛 SDC incorrectly throws an exception about embedded slots Needs work . Probably should file this there then

    region--header.html.twig

              {% embed 'my_components:mobile_header' %}
          {% endembed %}

    my_components/components/mobile_header.components.yml

    $schema: https://git.drupalcode.org/project/sdc/-/raw/1.x/src/metadata.schema.json
name: Mobile Header
props:
  type: object
  properties: {}

    my_components/components/mobile_header.twig

    <div{{ attributes.addClass("mobile_header") }}>
</div>
contrib.social Blog FAQ Discussions
Production build 0.71.5 2024