Live Component not working in any way...

[Anyeos]

First, sorry if I disturb someone with this because I am angry. I trusted the documentation but there seems to be important information not told. I respect the documentation because that is the guide and the mandatory to use some piece of software, specially for developers. So, I trust in that documentation but this time I am upset with it because there are no such place in the documentation to warn me or guide me to make it work for sure.

The example say that I only need to put this, put that other thing, and I don't need to do anything more, it will work out of the box but in reality that is not all. The live update random example is not working either. I push the button or change the value of the input box and nothing happens. It is like a common Twig Component (not live functionality). I have all the parameters just like the example says but it is not working.

In no place of the documentation there are information talking about that it uses Java Script or something else to work. It seem to be a "magic" thing that make "magically" do the job in the browser.

What I figured that I need is to include this piece of code in my base.html.twig template:

        {% block javascripts %}
            {% block importmap %}{{ importmap('app') }}{% endblock %}
        {% endblock %}

        {% set frankenphp_hot_reload = app.request.server.get('FRANKENPHP_HOT_RELOAD') %}
        {% if frankenphp_hot_reload %}
        <meta name="frankenphp-hot-reload:url" content="{{ frankenphp_hot_reload }}">
        <script src="https://cdn.jsdelivr.net/npm/idiomorph"></script>
        <script src="https://cdn.jsdelivr.net/npm/frankenphp-hot-reload/+esm" type="module"></script>
        {% endif %}

And I created a completely new Symfony project for testing and it is not working well either. The values are not "stateful", when I press the "Generate random number" button it resets max to the default value of the PHP initialization (not the provided value on the template and either the value what the user inputs). And when I change the value of "max" in the input field (with the writable enabled true) it does nothing but change the number in the browser. So it is not working.

I think this detail must be in the documentation because it is very difficult to realize that I need an "importmap" section for the "app" thing. Because that name (app) sounds like an example or placeholder. It does not sounds like a production ready name. I suggest change that name to something like "symfony". So in that way it sounds like being something that is part of the symfony core, but the basic name "app" sounds like a placeholder to be used as I want.

And I stil don't know what does the frankenphp_hot_reload do. So that should be in the documentation to clarify that. And I didn't skip reading, but the Symfony web page have the topics separated in blocks so there are no any defined order to follow.

And the console error now is:

app-TNXHCQF.js:10 This log comes from assets/app.js - welcome to AssetMapper! 🎉
stimulus.index-ryewcoo.js:11 application #starting
stimulus.index-ryewcoo.js:11 live #initialize
stimulus.index-ryewcoo.js:11 live #connect
stimulus.index-ryewcoo.js:11 application #start
live_controller-BJiMPws.js:1596 Uncaught Error: Invalid model name "max".
    at Component.set (live_controller-BJiMPws.js:1596:46)
    at s.updateModelFromElementEvent (live_controller-BJiMPws.js:2554:18)
    at s.handleInputEvent (live_controller-BJiMPws.js:2515:8)
    at HTMLDivElement.callback (live_controller-BJiMPws.js:2361:29)
set @ live_controller-BJiMPws.js:1596
updateModelFromElementEvent @ live_controller-BJiMPws.js:2554
handleInputEvent @ live_controller-BJiMPws.js:2515
callback @ live_controller-BJiMPws.js:2361
live_controller-BJiMPws.js:1596 Uncaught Error: Invalid model name "max".
    at Component.set (live_controller-BJiMPws.js:1596:46)
    at s.updateModelFromElementEvent (live_controller-BJiMPws.js:2554:18)
    at s.handleInputEvent (live_controller-BJiMPws.js:2515:8)
    at HTMLDivElement.callback (live_controller-BJiMPws.js:2361:29)
set @ live_controller-BJiMPws.js:1596
updateModelFromElementEvent @ live_controller-BJiMPws.js:2554
handleInputEvent @ live_controller-BJiMPws.js:2515
callback @ live_controller-BJiMPws.js:2361
live_controller-BJiMPws.js:1596 Uncaught Error: Invalid model name "max".
    at Component.set (live_controller-BJiMPws.js:1596:46)
    at s.updateModelFromElementEvent (live_controller-BJiMPws.js:2554:18)
    at s.handleChangeEvent (live_controller-BJiMPws.js:2520:8)
    at HTMLDivElement.callback (live_controller-BJiMPws.js:2364:29)
set @ live_controller-BJiMPws.js:1596
updateModelFromElementEvent @ live_controller-BJiMPws.js:2554
handleChangeEvent @ live_controller-BJiMPws.js:2520
callback @ live_controller-BJiMPws.js:2364

Really I apologize if I am a bit rude, I want to find a solution and help with information to improve Symfony. I use it often and I like it, but when something new is implemented I don't like it to not work being already realeased, not beta. If it is beta it is ok, but if it is released then it must work as expected.

[charles-benedito]

That console error is the actual clue. Invalid model name "max" is thrown by the live controller when max isn't among the component's live props it got from the server. So the frontend side is loaded fine now, but PHP isn't treating $max as a LiveProp. That also explains why max snaps back to the default on every re-render.

Check that the property has #[LiveProp(writable: true)] and that the file has use Symfony\UX\LiveComponent\Attribute\LiveProp;. Without the import, PHP silently ignores the attribute and you get exactly this behaviour. Also the class needs #[AsLiveComponent] (not #[AsTwigComponent]) plus use DefaultActionTrait;. That's the step in the docs here: https://symfony.com/bundles/ux-live-component/current/index.html#data-binding

Btw the frankenphp hot reload block isn't related to live components, it's just from the FrankenPHP setup, you can ignore it.

[Anyeos]

I am miss, really I don't know what happened because, yes, in the random example test I forgot to put the use Symfony\UX\LiveComponent\Attribute\LiveProp; but in my project code I din't. And now magically it is working in my project (Yesterday I removed the ux-live-component and removed ux-turbo also). Now I installed the ux-live-component again and it is working. Maybe the ux-turbo have a problem? Because now I don't have the ux-turbo installed.