[LiveComponent] `data-model` started throwing the "Invalid model name" error after upgrading to 2.15

[jakubtobiasz]

Hi, considering the following code:

When we bump the LC to 2.15.0 the frontend starts throwing live_controller.js:1885 Uncaught Error: Invalid model name "selectedAttributeCodes"..

The JS code suggest the model name is not present in the valueStore.

[martinberlin]

When following this guide: https://symfony.com/bundles/ux-live-component/current/index.html#data-binding

I also get this: Invalid model name "max"

Using symfony-ux-live-component 2.18

[smnandre]

Hello @martinberlin!

Could you share your code or create a reproducer for this bug ?

The idea is to get the smallest repository possible in which the bug can be observed... ... so we can install & test it easily and see what is not working as expected and why.

Documentation: https://symfony.com/doc/current/contributing/code/reproducer.html

Thank you!

[martinberlin]

Hi @smnandre I did this at work for a client so I cannot share it but will prepare a demo in a new Symfony v7 installation and upload it in GitHub as soon as I find some time. I really like Live UX and would like to use it for future projects.

[smnandre]

Thank you @martinberlin !

[martinberlin]

Here I just uploaded a small repository containing a Symfony 7.1.2 fresh installation and this example: https://github.com/martinberlin/symfony-7-ux-live

Please note that I found other people having issues installing UX live and dependencies so I followed also this instructions: https://stackoverflow.com/questions/77684268/bootstrap-cannot-find-symfony-stimulus-bundle At this point the only error I get is when updating the input type="number" but the buton click works correctly and generates a new Random number.

[smnandre]

Please note that I found other people having issues installing UX live [...]

If you want to use webpack encore, you need to uninstall AssetMapper

[smnandre]

Here I just uploaded a small repository containing a Symfony 7.1.2 fresh installation and this example: https://github.com/martinberlin/symfony-7-ux-live

You did not install symfony/ux-live-component

[martinberlin]

OH! You are completely right. Added it. Also double checked this:

• Check if the package "@symfony/stimulus-bridge" is installed in package.json
• In assets/app.js add the line import './bootstrap.js';
• In webpack.config.js add the line .enableStimulusBridge('./assets/controllers.json') to import the controllers file

If you want to use webpack encore, you need to uninstall AssetMapper

That unless I'm missing something is done. This part is a bit confusing since when you install symfony --webapp it comes but then needs to be removed for the ux-live installation.

[martinberlin]

FOUND IT!

I know what I was missing:

use Symfony\UX\LiveComponent\Attribute\LiveProp;

Without that use statement the #[LiveProp] will not work, hence is not added, and comes that error in Javascript. Would be much nicer that it comes some PHP error or something but I guess that's not possible for some reason

[smnandre]

This part is a bit confusing since when you install symfony --webapp it comes but then needs to be removed for the ux-live installation.

This can be confusing i agree. But AssetMapper does not need to be removed for the ux-live installation.. it does need to be removed if you install Webpack encore.

The ux.symfony.com website uses all UX packages on AssetMapper (one could say it is even the simpliest way to use them now)

Would be much nicer that it comes some PHP error or something but I guess that's not possible for some reason

We cannot control in PHP what is written into the data-model .. so sadly i don't see how we can improve things there.. But if you have any idea i'd be more than happy to improve things :)

[martinberlin]

Thanks now that I finally understood more will go through all the examples and see if I have some idea to make it better. Really powerful tool!

[smnandre]

The documentation is really big today, so it's not always easy to emphasis things or illustrate.

We are thinking about splitting it in multiple pages (per "feature") and @WebMamba started to work on a cookbook that will present things on a more "macro" level..

Many things to do but i have good hope we can release some cool things before the end of summer!

[carsonbot]

Thank you for this issue. There has not been a lot of activity here for a while. Has this been resolved?

[carsonbot]

Could I get an answer? If I do not hear anything I will assume this issue is resolved or abandoned. Please get back to me <3

[carsonbot]

Hey,

I didn't hear anything so I'm going to close it. Feel free to comment if this is still relevant, I can always reopen!

[tdumalin]

Hello,

I encounter the same issue with an input added on the form in javascript. I have a CollectionType and I use stimulus to handle the item addition/removal After adding the new item, when I change the value of the text input it throw the same error. Is there a solution to notify the live controller that a new input has been added on the form and it should update the valueStore ?

NB: I prefer not using LiveCollectionType

The message: Uncaught Error: Invalid model name "post_edit.items.0".

The form:

<?php

namespace App\Form\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\CollectionType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;

class PostEditType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder->add('items', CollectionType::class, [
            'mapped' => false,
            'entry_type' => TextType::class
        ]);
    }


}

The stimulus controller:

import { Controller } from '@hotwired/stimulus';

export default class extends Controller {

    static targets = ['container', 'item']
    static values = {
        prototype: String,
    }

    connect() {
        this.index = this.itemTargets.length;
    }

    addItem() {
        const template = document.createElement('template');
        const html = this.prototypeValue.replace(/__name__/g, this.index);
        // Insère la chaîne HTML dans le template
        template.innerHTML = html.trim();

        const newItem = template.content.firstElementChild;
        this.containerTarget.appendChild(newItem);
        this.index++;
    }

    removeItem(event) {
        this.itemTargets.forEach(element => {
            if (element.contains(event.target)) {
                element.remove();
            }
        })
    }
}

Thanks for the help