Problem/Motivation

After enabling the module, pages throw an error:
[attributes] String value found, but an object is required

Defining the attributes prop seems to satisfy the error.

Comments

mortona2k created an issue. See original summary.

markie’s picture

+1 on this issue since it causes a WSOD with not much detail on which component is missing the definition. SDC documentation states all props are optional so I imagine most won't define attributes since that's just handed down by default.

Full Error: 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).

just_like_good_vibes’s picture

Status: Active » Postponed (maintainer needs more info)

Hello,
thank you for reporting this issue.
We need more info to be able to help you.
Generally, those errors occur when components are used in an unexpected way.
Would you tell us, which theme and which components are in your site please, and probably which twig syntax is provoking this bug?
thank you very much in advance,

mortona2k’s picture

I don't know what exactly was causing it. Possibly including a component inside another component without specifying props to pass (inheriting from the current template/component). Possibly not using the attributes array.

It seemed like it was just from having attributes undefined in the component.yml file, but I also have some that don't have it and it's fine.

The problem was causing a whitescreen error.

pdureau’s picture

SDC documentation states all props are optional so I imagine most won't define attributes since that's just handed down by default.

All props are optional but an empty attributes prop is automatically injected in the template by SDC if missing.

That's why you can do {{ attributes.addClass("foo") }} without doing {% set attributes = attributes|default(create_attribute()) %} before

pdureau’s picture

Status: Postponed (maintainer needs more info) » Active

Possibly including a component inside another component without specifying props to pass (inheriting from the current template/component). Possibly not using the attributes array.

This is not clear. Can you show us how you call the component?

pdureau’s picture

Status: Active » Postponed (maintainer needs more info)
mortona2k’s picture

Status: Postponed (maintainer needs more info) » Needs review

My page SDC:

$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas...
name: Page
props:
type: object
properties:
page:
type: array

page.html.twig template, trying to include the component in different ways.

{{ include('unocss_starter:page', with_context = false) }}

or

{% embed 'mantra_starter:page' with {page} only %}
{% endembed %}

Either way, it throws the error unless attributes is defined in the page component.

pdureau’s picture

Status: Needs review » Postponed (maintainer needs more info)

Twig's include & embed are not a very good way to embed components, because they don't trigger the SDC render element.

Please use component() function, provided by UIP2, instead.

mortona2k’s picture

I see a pattern() function in the docs, is that what you meant?

https://www.drupal.org/docs/contributed-modules/ui-patterns/developer-do...

pdureau’s picture

pattern() function was for UI Patterns 1.x, component(string $component_id, array $slots = [], array $props = []) function is for UI Patterns 2.

We are planning to update the documentation before Christmas: #3480554: Documentation upgrade from v1 to v2

If possible, we also want to trigger the SDC component with include & embed :

pdureau’s picture

Status: Postponed (maintainer needs more info) » Fixed
pdureau’s picture

Status: Fixed » Closed (fixed)