Problem/Motivation

When viewing the SDC Component Library preview page, a PHP warning is triggered: "Array to string conversion" in component-preview.html.twig at line 237. This occurs when components have array values in their prop examples. The warning appears every time the component library page loads, creating a poor developer experience.

Steps to reproduce

1. Install sdc_component_library module
2. Create a component with props that have array examples (e.g., checklist_items: [array])
3. Create a .story.twig file for the component
4. Navigate to /sdc-component-library
5. Observe the "Array to string conversion" warning in the browser console/logs

Proposed resolution

Modify the code block generation in component-preview.html.twig to check if example values are iterable (arrays) before attempting string conversion. Use the json_encode filter for array values instead of direct string concatenation.

Change the props_string generation logic to:
- Check if value.examples[0] is iterable
- If iterable, use json_encode filter
- If not, use the value directly

Remaining tasks

- Review and test the patch
- Ensure it handles all data types correctly
- Verify no regressions in code preview display

User interface changes

None. The code preview display will remain the same, but array examples will be properly JSON-encoded in the generated code snippet.

API changes

None.

Data model changes

None.

Issue fork sdc_component_library-3589910

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

jaydee1818 created an issue. See original summary.

jaydee1818 opened merge request !27

d.fisher’s picture

d.fisher commented

I've just followed the steps to reproduce this and I'm not seeing any errors. Are you able to provide the component you are seeing the error with so I can investigate further?

d.fisher’s picture

d.fisher commented
Status: Active » Postponed (maintainer needs more info)
d.fisher’s picture

d.fisher commented
Version: 1.0.5 » 1.0.x-dev

Can you also provide which version of Drupal core you are working with? Thank you.

jaydee1818’s picture

jaydee1818 commented

So this is an example of a component that triggers the issue:

'$schema': 'https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json'
name: Plan Tile Checklist
status: stable
description: Displays a list of items.
props:
  type: object
  properties:
    label:
      type: string
      title: Label
      description: The text displayed as a subheading.
      examples:
        - "Plan includes"
    checklist_items:
      type: array
      title: Checklist Items
      description: An array of items.
      examples:
        - ["Unlimited data", "No lock-in contract", "Free modem"]
        - ["FTTP", "FTTC", "HFC"]
    use_pills:
      type: boolean
      title: Use Pills Variant
      description: When true, displays items as pills. When false, displays as list items.
      default: false

Note that the prop "checklist_items" is of "type: array"

This happens on both 10.6 and 11.3.

Notification triggered:

Warning: Array to string conversion in __TwigTemplate_096cf9e520ba9070b7e2c827f4e0f58f->doDisplay() (line 237 of sites/dodo/files/php/twig/6a0f06ccae9d2_component-preview.html.tw_K6ZspBqjsZIKc1qaDuKXPylhw/Y9S6wb54LF2ZIRh1vyjdqGJjw5ZG5qwQAqIyOM6tbJI.php).
__TwigTemplate_096cf9e520ba9070b7e2c827f4e0f58f->doDisplay() (Line: 402)
Twig\Template->yield() (Line: 358)
Twig\Template->display() (Line: 373)
Twig\Template->render() (Line: 51)
Twig\TemplateWrapper->render() (Line: 33)
twig_render_template() (Line: 348)
Drupal\Core\Theme\ThemeManager->render() (Line: 490)
Drupal\Core\Render\Renderer->doRender() (Line: 248)
Drupal\Core\Render\Renderer->render() (Line: 238)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 637)
Drupal\Core\Render\Renderer->executeInRenderContext() (Line: 231)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare() (Line: 128)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse() (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray()
call_user_func() (Line: 111)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch() (Line: 186)
Symfony\Component\HttpKernel\HttpKernel->handleRaw() (Line: 76)
Symfony\Component\HttpKernel\HttpKernel->handle() (Line: 68)
Drupal\simple_oauth\HttpMiddleware\BasicAuthSwap->handle() (Line: 53)
Drupal\Core\StackMiddleware\Session->handle() (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle() (Line: 28)
Drupal\Core\StackMiddleware\ContentLength->handle() (Line: 32)
Drupal\big_pipe\StackMiddleware\ContentLength->handle() (Line: 53)
Asm89\Stack\Cors->handle() (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle() (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle() (Line: 36)
Drupal\Core\StackMiddleware\AjaxPageState->handle() (Line: 51)
Drupal\Core\StackMiddleware\StackedHttpKernel->handle() (Line: 741)
Drupal\Core\DrupalKernel->handle() (Line: 19)

The patch I've supplied resolves the issue.

d.fisher’s picture

d.fisher commented
Status: Postponed (maintainer needs more info) » Needs review

Thank you. I'll take a look using your component example. That looks similar to what I set up just now and didn't see any errors at all.

jaydee1818’s picture

jaydee1818 commented

Ok - it's actually the array structure of the examples that cause the issue:

      examples:
        - ["Unlimited data", "No lock-in contract", "Free modem"]
        - ["FTTP", "FTTC", "HFC"]
d.fisher’s picture

d.fisher commented

I've never used the examples key so I'm not familiar with that the structure should be.

This is the latest metadata schema json:
https://git.drupalcode.org/project/drupal/-/raw/11.3.x/core/assets/schem...

It does appear that your array structures are correct.

So the issue still stands - but we now know it specifically relates to the examples key? Does that sound correct?

jaydee1818’s picture

jaydee1818 commented

Yes - if I remove the examples, we don’t see the warning. The patch I’ve submitted specifically targets the “examples” key.

d.fisher’s picture

d.fisher commented

Excellent. Ok thanks. Now I should be able to recreate the error and test the patch. Thanks for your patience. Just wanted to verify that I can see the same issue that you're having and that the patch fixes it. Leave it with me. I'll endeavour to pick this up Tuesday morning (we're on a long weekend here in the UK).