Filament•16mo ago

Component not found after changing a ->live() element

Hello, i have created a full page component which uses a form and a select live field to conditionally show a section, however when i change the select field, i get a "Component not found" error. Here is the error: https://flareapp.io/share/lm2K0O0P Here is the code:

<?php

namespace App\Http\Livewire;

use App\Enum\TransportEnum;
use App\Models\Booking;
use App\Models\RoomDetail;
use Filament\Forms\Components\Section;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;
use Filament\Forms\Get;
use Livewire\Component;

class TransportDetails extends Component implements HasForms
{
    use InteractsWithForms;

    public $data = [];
    public Booking $booking;

    public function mount($id)
        {
            $this->booking = RoomDetail::find($id)->room->booking;
            $this->form->fill();
        }

    public function form(Form $form): Form
        {
            return $form
                ->statePath('data')
                ->schema([
                    Section::make('Transport Details')
                        ->schema([
                            Select::make('transport_method')
                                ->live()
                                ->options(TransportEnum::class)
                                ->required(),
                        ]),

                    Section::make('Car Details')
                        ->visible(fn(Get $get) => $get('transport_method') == TransportEnum::DRIVING->value)
                        ->schema([
                            TextInput::make('car_make_model')
                                ->required(),
                            TextInput::make('car_numberplate')
                                ->required(),
                            Select::make('driving_to_campus')
                                ->options([
                                    'yes' => 'Yes',
                                    'no' => 'No',
                                ])
                                ->required(),
                            Select::make('requires_transport_from_campus')
                                ->options([
                                    'yes' => 'Yes',
                                    'no' => 'No',
                                ])
                                ->required(),
                        ])
                ]);
        }
    public function render()
        {
            return view('livewire.transport_details');
        }
}

<?php

namespace App\Http\Livewire;

use App\Enum\TransportEnum;
use App\Models\Booking;
use App\Models\RoomDetail;
use Filament\Forms\Components\Section;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;
use Filament\Forms\Get;
use Livewire\Component;

class TransportDetails extends Component implements HasForms
{
    use InteractsWithForms;

    public $data = [];
    public Booking $booking;

    public function mount($id)
        {
            $this->booking = RoomDetail::find($id)->room->booking;
            $this->form->fill();
        }

    public function form(Form $form): Form
        {
            return $form
                ->statePath('data')
                ->schema([
                    Section::make('Transport Details')
                        ->schema([
                            Select::make('transport_method')
                                ->live()
                                ->options(TransportEnum::class)
                                ->required(),
                        ]),

                    Section::make('Car Details')
                        ->visible(fn(Get $get) => $get('transport_method') == TransportEnum::DRIVING->value)
                        ->schema([
                            TextInput::make('car_make_model')
                                ->required(),
                            TextInput::make('car_numberplate')
                                ->required(),
                            Select::make('driving_to_campus')
                                ->options([
                                    'yes' => 'Yes',
                                    'no' => 'No',
                                ])
                                ->required(),
                            Select::make('requires_transport_from_campus')
                                ->options([
                                    'yes' => 'Yes',
                                    'no' => 'No',
                                ])
                                ->required(),
                        ])
                ]);
        }
    public function render()
        {
            return view('livewire.transport_details');
        }
}

Flare

Unable to find component: [app.http.livewire.transport-details] - The error occurred at http://localhost/transport-details/9a00a479-ec8c-4b2b-ab6f-46294488a349

Solution:

Yeah i started out with a hyphen and changed it to an underscore just to see what would happen. Thanks for the tip though Turns out the issue was one of 'laziness'. Livewire 3 seems to look for components at App\Livewire rather than App\Http\Livewire and i'd generated the component using Laravel Idea plugin rather than through the CLI. I recreated the compontent using the CLI and now that its in the "correct" place, it is working fine!...

Jump to solution

3 Replies

Kenneth Sese•16mo ago

Unsure if this is the issue, but I've always used views with hypens instead of underscores. That doesn't seem to be the issue if the view actually loads for you, but who knows...worth a shot...especially since the error seems to be looking for the view at transport-details

Solution

AsuranDex•16mo ago

Kenneth Sese•16mo ago

It's interesting that it rendered in the first place...but glad you solved it! 👍

Gaming

Programming

Component not found after changing a ->live() element