filamentphp / filament

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS.
https://filamentphp.com
MIT License
19.3k stars 2.96k forks source link

Alpine Expression Error: undefined for form within livewire component #10757

Closed InfinityXTech closed 10 months ago

InfinityXTech commented 10 months ago

Package

filament/filament

Package Version

v3.1.42

Laravel Version

10.40.0

Livewire Version

v3.3.5

PHP Version

8.2.12

Problem description

Alpine Expression Error: undefined for form within livewire component. I get error on the picture, bcs of the error the form doesnt work and submiting refreshes the page. (I am calling this component inside modal) image

<?php

namespace App\Livewire;

use Filament\Forms\Contracts\HasForms;
use Livewire\Component;
use Filament\Forms\Components\RichEditor;
use Filament\Forms\Form;
use Filament\Forms\Concerns\InteractsWithForms;

class Chat extends Component implements HasForms
{
    use InteractsWithForms;

    public ?array $data = [];

    public function mount(): void
    {
        $this->form->fill();
    }

    public function render()
    {
        return view('livewire.chat');
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                RichEditor::make('body')
            ])
            ->statePath('data');
    }
    public function send (): void
    {
        dd($this->form->getState());
    }
}

Expected behavior

Bind form field to $data array.

Steps to reproduce

https://filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component

Reproduction repository

https://github.com/soixt/demo-for-testing

Relevant log output

Alpine Expression Error: undefined

Expression: "richEditorFormComponent({
                            state: $wire.$entangle('data.body', false),
                        })"
leoblanski commented 10 months ago

I guess I have a similar problem... Basically, what I'm doing is creating a new RichEditor component within a form. It works perfectly when I'm using complete resources (with CRUD pages). However, for some reason – I don't know if it's a bug or if I'm doing something wrong – when using it in a simple resource generated with php artisan filament:resource TestResource --simple,' it doesn't work…

public static function form(Form $form): Form
    {
        return $form
            ->schema([
                RichEditor::make('body')
                    ->label('Description')
                    ->required(),
            ]);
    }

Returns: Uncaught Could not find Livewire component in DOM tree on console

test

InfinityXTech commented 10 months ago

F*ck, I figure it out.... Such a dumb error message for what was causing it... I had two elements in my livewire component on root level.