bug(ux): LiveProp not initialized while using the search form

[Guikingone]

Hi 👋🏻

I recently faced an issue when it comes to use the search form plugged to a LiveComponent, it seems that the LiveProp is not initialized:

Uncaught Error: The model name "query" was never initialized. Did you forget to expose "query" as a LiveProp? Available models values are: (none)
    at 928.0e3059b2.js:2:48118
    at y.set (928.0e3059b2.js:2:48330)
    at B.set (928.0e3059b2.js:2:57503)
    at t.updateModelFromElementEvent (928.0e3059b2.js:2:73943)
    at t.handleChangeEvent (928.0e3059b2.js:2:73359)
    at HTMLDivElement.callback (928.0e3059b2.js:2:70923)

The database is up, the assets are presents in public/build and the cache is cleared, here's the component (not modified):

<?php

/*
 * This file is part of the Symfony package.
 *
 * (c) Fabien Potencier <[email protected]>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

namespace App\Twig\Components;

use App\Entity\Post;
use App\Repository\PostRepository;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\DefaultActionTrait;

/**
 * Live component to display instant search for Posts.
 *
 * See https://symfony.com/bundles/ux-live-component/current/index.html
 *
 * @author Romain Monteil <[email protected]>
 */
#[AsLiveComponent(name: 'blog_search')]
final class BlogSearchComponent
{
    use DefaultActionTrait;

    /**
     * Properties marked as LiveProp are stateful properties.
     * This means that each time the component is re-rendered, it will remember the original value of the property
     * and set it to the component object.
     *
     * By default, LiveProp are readonly. Making them writable allow users to change their value.
     *
     * See https://symfony.com/bundles/ux-live-component/current/index.html#liveprops-stateful-component-properties
     */
    #[LiveProp(writable: true)]
    public string $query = '';

    public function __construct(
        private readonly PostRepository $postRepository,
    ) {
    }

    /**
     * @return array<Post>
     */
    public function getPosts(): array
    {
        return $this->postRepository->findBySearchQuery($this->query);
    }
}

The project is fresh and just installed using symfony new --demo my_project.

Thanks again for the help and have a great day 🙂

PS: The issue seems related to 6.3 / 6.4 as I have the same project under 6.2 and it works perfectly.

[abedo]

Hi

I faced a similar problem, but the solution turned out to be very simple, try:

yarn install --force

IMO this step should be added in README.md