Adding other components results in ajax error and form fails

Created on 12 September 2024, 3 months ago

Hi everyone, thanks for the work to bring SDC to Drupal. I've been experimenting with Components generally, and I was looking to integrate some custom components via Layout Builder. I've been trying to understand the ecosystem of cl_editorial modules. I think this is the correct module to report this bug?!
Also I'm unsure what the expectations are around this, so maybe I've missed some information.

Problem/Motivation

Drupal 10.3.5
Adding the demo component component_card works.
Adding either a custom component or Olivero's default teaser results in 500 ajax error

{
    "message": "\nAn AJAX HTTP error occurred.\nHTTP Result Code: 500\nDebugging information follows.\nPath: /layout_builder/add/block/overrides/node.6/0/second/sdc_component_block%3Aolivero%3Ateaser\nStatusText: 500 Service unavailable (with message)\nResponseText: The website encountered an unexpected error. Try again later.TypeError: Adaptor SchemaForms\\Drupal\\FormGeneratorDrupal received invalid input data: []. in Shaper\\Transformation\\TransformationBase->Shaper\\Transformation\\{closure}() (line 23 of /var/www/vendor/e0ipso/shaper/src/Transformation/TransformationTransformerTrait.php). Shaper\\Transformation\\TransformationBase->transform(Object, Object) (Line: 62)\nDrupal\\cl_editorial\\Form\\ComponentInputToForm->buildForm('olivero:teaser', Array, Array, Object) (Line: 150)\nDrupal\\sdc_block\\Plugin\\Block\\ComponentBlock->blockForm(Array, Object) (Line: 188)\nDrupal\\Core\\Block\\BlockBase->traitBuildConfigurationForm(Array, Object) (Line: 35)\nDrupal\\Core\\Block\\BlockBase->buildConfigurationForm(Array, Object) (Line: 174)\nDrupal\\layout_builder\\Form\\ConfigureBlockFormBase->doBuildForm(Array, Object, Object, '0', Object) (Line: 61)\nDrupal\\layout_builder\\Form\\AddBlockForm->buildForm(Array, Object, Object, '0', 'second', 'sdc_component_block:olivero:teaser')\ncall_user_func_array(Array, Array) (Line: 536)\nDrupal\\Core\\Form\\FormBuilder->retrieveForm('layout_builder_add_block', Object) (Line: 284)\nDrupal\\Core\\Form\\FormBuilder->buildForm(Object, Object) (Line: 73)\nDrupal\\Core\\Controller\\FormController->getContentResult(Object, Object)\ncall_user_func_array(Array, Array) (Line: 123)\nDrupal\\Core\\EventSubscriber\\EarlyRenderingControllerWrapperSubscriber->Drupal\\Core\\EventSubscriber\\{closure}() (Line: 638)\nDrupal\\Core\\Render\\Renderer->executeInRenderContext(Object, Object) (Line: 124)\nDrupal\\Core\\EventSubscriber\\EarlyRenderingControllerWrapperSubscriber->wrapControllerExecutionInRenderContext(Array, Array) (Line: 97)\nDrupal\\Core\\EventSubscriber\\EarlyRenderingControllerWrapperSubscriber->Drupal\\Core\\EventSubscriber\\{closure}() (Line: 181)\nSymfony\\Component\\HttpKernel\\HttpKernel->handleRaw(Object, 1) (Line: 76)\nSymfony\\Component\\HttpKernel\\HttpKernel->handle(Object, 1, 1) (Line: 53)\nDrupal\\Core\\StackMiddleware\\Session->handle(Object, 1, 1) (Line: 48)\nDrupal\\Core\\StackMiddleware\\KernelPreHandle->handle(Object, 1, 1) (Line: 28)\nDrupal\\Core\\StackMiddleware\\ContentLength->handle(Object, 1, 1) (Line: 32)\nDrupal\\big_pipe\\StackMiddleware\\ContentLength->handle(Object, 1, 1) (Line: 106)\nDrupal\\page_cache\\StackMiddleware\\PageCache->pass(Object, 1, 1) (Line: 85)\nDrupal\\page_cache\\StackMiddleware\\PageCache->handle(Object, 1, 1) (Line: 48)\nDrupal\\Core\\StackMiddleware\\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)\nDrupal\\Core\\StackMiddleware\\NegotiationMiddleware->handle(Object, 1, 1) (Line: 36)\nDrupal\\Core\\StackMiddleware\\AjaxPageState->handle(Object, 1, 1) (Line: 51)\nDrupal\\Core\\StackMiddleware\\StackedHttpKernel->handle(Object, 1, 1) (Line: 741)\nDrupal\\Core\\DrupalKernel->handle(Object) (Line: 19)\n",
    "name": "AjaxError"
}

The website encountered an unexpected error. Try again later.

TypeError: Adaptor SchemaForms\Drupal\FormGeneratorDrupal received invalid input data: []. in Shaper\Transformation\TransformationBase->Shaper\Transformation\{closure}() (line 23 of /var/www/vendor/e0ipso/shaper/src/Transformation/TransformationTransformerTrait.php).
Shaper\Transformation\TransformationBase->transform(Object, Object) (Line: 62)
Drupal\cl_editorial\Form\ComponentInputToForm->buildForm('olivero:teaser', Array, Array, Object) (Line: 150)
Drupal\sdc_block\Plugin\Block\ComponentBlock->blockForm(Array, Object) (Line: 188)
Drupal\Core\Block\BlockBase->traitBuildConfigurationForm(Array, Object) (Line: 35)
Drupal\Core\Block\BlockBase->buildConfigurationForm(Array, Object) (Line: 174)
Drupal\layout_builder\Form\ConfigureBlockFormBase->doBuildForm(Array, Object, Object, '0', Object) (Line: 61)
Drupal\layout_builder\Form\AddBlockForm->buildForm(Array, Object, Object, '0', 'second', 'sdc_component_block:olivero:teaser')
call_user_func_array(Array, Array) (Line: 536)
Drupal\Core\Form\FormBuilder->retrieveForm('layout_builder_add_block', Object) (Line: 284)
Drupal\Core\Form\FormBuilder->buildForm(Object, Object) (Line: 73)
Drupal\Core\Controller\FormController->getContentResult(Object, Object)
call_user_func_array(Array, Array) (Line: 123)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}() (Line: 638)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 124)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->wrapControllerExecutionInRenderContext(Array, Array) (Line: 97)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}() (Line: 181)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 76)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 53)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 28)
Drupal\Core\StackMiddleware\ContentLength->handle(Object, 1, 1) (Line: 32)
Drupal\big_pipe\StackMiddleware\ContentLength->handle(Object, 1, 1) (Line: 106)
Drupal\page_cache\StackMiddleware\PageCache->pass(Object, 1, 1) (Line: 85)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 36)
Drupal\Core\StackMiddleware\AjaxPageState->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\StackedHttpKernel->handle(Object, 1, 1) (Line: 741)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)

Steps to reproduce

Enable sdc_blocks and dependencies
Enable layout builder on a content type, and select "Allow each content item to have its layout customized."
On a node visit the layout tab and "Add block".
Select "Teaser" and notice the error.

Proposed resolution

TBC

Remaining tasks

TBC

User interface changes

TBC

API changes

TBC

Data model changes

TBC

🐛 Bug report
Status

Active

Version

1.0

Component

Code

Created by

🇳🇱Netherlands left

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

Comments & Activities

  • Issue created by @left
  • 🇧🇷Brazil varod-br São Paulo

    Hi there!

    I was trying to "convert" a component that I was using with the module Component do Single Directory Component and was facing the same problem, but there are two thing to consider:

    1) The problem here is not with the sdc_block module;
    2) To bypass this problem, add some prop to your component. SDC Components with no props are causing this issue;

    I was debugging and the problem I found is in the cl_editorial module, docroot/modules/contrib/cl_editorial/src/Form/ComponentInputToForm.php file, line 62.

    When there are no props, the $context variable returns null and it breaks the code when calling:
    $element['props'] = $this->formGenerator->transform($schema, $context);

    I'll add the details I found in the proper place, in an issue related to cl_editorial module.

    Best!

  • 🇳🇱Netherlands left

    Thanks for investigating.
    This is my component yml

    $schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
    name: Card
    status: experimental
    group: storybook
    
    props:
      type: object
      required:
        - attributes
        - content
      properties:
        attributes:
          type: Drupal\Core\Template\Attribute
          title: Drupal attributes
          description: HTML attributes for the root wrapper element.
        content:
          type: string
          title: Card content
          description: The content of the card component.
        title:
          type: string
          title: Card title
          level: 3
          modifier: 'card__title'
          text: 'Phasellus sit amet maximus velit'
          url: 'https://example.com'
    

    Notice it has props, if that is what you are referring to. If not, can you give a code example?

Production build 0.71.5 2024