Impossible to use live components inside CollectionType

[Nek-]

I have to admit, I tried something a bit weird :) . I wanted to use a twig live component inside a collection form type. I did this because I need the field to be highly dynamic and it's dependent on another field and specific entities and... I spare you the details: it's a complicated form.

My code looks something like this:

{% block _product_variants_list_entry_optionValues_entry_value_widget %}
    {%- set type = type|default('text') -%}
    {{ component('OptionValueInput', {'type': type, 'attr': block('widget_attributes'), value: value, 'optionId': optionId}) }}
{% endblock %}

I expected to do the hard work inside my component. But I ended up quickly with the following error:

Invalid checksum sent when updating the live component.

  at vendor/symfony/ux-live-component/src/LiveComponentHydrator.php:362
  at Symfony\UX\LiveComponent\LiveComponentHydrator->verifyChecksum(array('isOpen' => false, 'optionId' => 'product_variants_0_optionValues_1_option', 'option' => null, '@attributes' => array('id' => 'live-1864495928-0', 'type' => 'text', 'value' => '')))
     (vendor/symfony/ux-live-component/src/LiveComponentHydrator.php:613)
  at Symfony\UX\LiveComponent\LiveComponentHydrator->combineAndValidateProps(array('isOpen' => false, 'optionId' => 'product_variants_0_optionValues_1_option', 'option' => null, '@attributes' => array('id' => 'live-1864495928-0', 'type' => 'text', 'value' => ''), '@checksum' => 'XWQGm2aZed8324YLM87Dn/vFZtrajsi96gC+3uYJ1V0='), array())
     (vendor/symfony/ux-live-component/src/LiveComponentHydrator.php:140)
  at Symfony\UX\LiveComponent\LiveComponentHydrator->hydrate(object(OptionValueInput), array('isOpen' => false, 'optionId' => 'product_variants_0_optionValues_1_option', 'option' => null, '@attributes' => array('id' => 'live-1864495928-0', 'type' => 'text', 'value' => ''), '@checksum' => 'XWQGm2aZed8324YLM87Dn/vFZtrajsi96gC+3uYJ1V0='), array(), object(LiveComponentMetadata), array())
     (vendor/symfony/ux-live-component/src/EventListener/LiveComponentSubscriber.php:357)
  at Symfony\UX\LiveComponent\EventListener\LiveComponentSubscriber->hydrateComponent(object(OptionValueInput), 'OptionValueInput', object(Request))
     (vendor/symfony/ux-live-component/src/EventListener/LiveComponentSubscriber.php:185)
  at Symfony\UX\LiveComponent\EventListener\LiveComponentSubscriber->onKernelController(object(ControllerEvent), 'kernel.controller', object(TraceableEventDispatcher))
     (vendor/symfony/event-dispatcher/Debug/WrappedListener.php:115)
  at Symfony\Component\EventDispatcher\Debug\WrappedListener->__invoke(object(ControllerEvent), 'kernel.controller', object(TraceableEventDispatcher))
     (vendor/symfony/event-dispatcher/EventDispatcher.php:206)
  at Symfony\Component\EventDispatcher\EventDispatcher->callListeners(array(object(WrappedListener), object(WrappedListener), object(WrappedListener), object(WrappedListener)), 'kernel.controller', object(ControllerEvent))
     (vendor/symfony/event-dispatcher/EventDispatcher.php:56)
  at Symfony\Component\EventDispatcher\EventDispatcher->dispatch(object(ControllerEvent), 'kernel.controller')
     (vendor/symfony/event-dispatcher/Debug/TraceableEventDispatcher.php:122)
  at Symfony\Component\EventDispatcher\Debug\TraceableEventDispatcher->dispatch(object(ControllerEvent), 'kernel.controller')
     (vendor/symfony/http-kernel/HttpKernel.php:171)
  at Symfony\Component\HttpKernel\HttpKernel->handleRaw(object(Request), 1)
     (vendor/symfony/http-kernel/HttpKernel.php:76)
  at Symfony\Component\HttpKernel\HttpKernel->handle(object(Request), 1, true)
     (vendor/symfony/http-kernel/Kernel.php:182)
  at Symfony\Component\HttpKernel\Kernel->handle(object(Request))
     (vendor/symfony/runtime/Runner/Symfony/HttpKernelRunner.php:35)
  at Symfony\Component\Runtime\Runner\Symfony\HttpKernelRunner->run()
     (vendor/autoload_runtime.php:29)
  at require_once('[../../..]/vendor/autoload_runtime.php')
     (public/index.php:5)                

It's related to the stimulus controller I use against it:

    async initialize() {
        this.component = await getComponent(this.element);
        const option = document.getElementById(this.optionIdValue);

        // 💥 
        this.component.action('setOption', {'id': option.value});

        option.addEventListener('change', () => {
            // Probably also 💥 
            this.component.action('setOption', {'id': option.value});
        });
    }

I think it's because the live component is built using the content of the prototype of the collection type (maybe not idk).

[smnandre]

Did you try with LiveCollectionType ?

[Nek-]

I changed the approach no more using a form for the collection, so I can't say it would help (but probably yes!). I was not using LiveCollectionType.

This issue is connected to https://github.com/symfony/symfony/discussions/57959 where I give some help debugging this kind of error.