F
Filament•4w ago
biebthesecond

Filament Action on livewire page not mounting/throwing error

What I am trying to do: I have a schedule page, for each timeslot the user can click on it and either create or edit a timeslot entry. I have the actions working for the month-view of the schedule. I'm using the exact same Action objects for a week-view, but they're throwing a weird error. It seems like Livewire is losing the livewire components. What I did: - The wire:click is activating - The action tries to mount (checked using dd) - The action activates ->fillForm() - Using {{ $this->actionName }} (gives same error) - Most things which ChatGpt suggested: https://chatgpt.com/share/679a57a3-bff8-8005-8f1b-fd622bc90a8c the error: livewire.js?id=38dc8241:4502 Uncaught Snapshot missing on Livewire component with id: 1f0i9YIPD29PF0EE07vf Code: 
html 
@foreach ($this->generateTimeSlotsForDate(tasks: $tasks) as $timeslot => $tasksInSlot)
    @php
        $scheduleMillingRow = isset($tasksInSlot) ? $tasksInSlot[0] : null;
        $isTimeslotFilled = !empty($tasksInSlot);

        $schedule = $scheduleMillingRow?->schedule;
        $order = $schedule?->order;
        $orderNumber = $order?->order_number;
        $trimmedOrderNumber = $orderNumber ? preg_replace('/^\d{4}-/', '', $orderNumber) : null; //Verwijdert het jaartal en "-"

        $action = $isTimeslotFilled ? 'moveScheduleRow' : 'createScheduleRow';
        $actionParameters = $isTimeslotFilled
            ? sprintf('scheduleId: "%s", scheduleType: "%s", scheduleRowId: "%s"', $schedule->id, $scheduleType->value, $scheduleMillingRow->id)
            : sprintf('date: "%s", scheduleType: "%s", category: "%s"', $date->toDateString(), $scheduleType->value, $category);
    @endphp
    <div wire:click="mountAction('{{ $action }}', { {{ $actionParameters }} })">
    </div>
@endforeach
html 
@foreach ($this->generateTimeSlotsForDate(tasks: $tasks) as $timeslot => $tasksInSlot)
    @php
        $scheduleMillingRow = isset($tasksInSlot) ? $tasksInSlot[0] : null;
        $isTimeslotFilled = !empty($tasksInSlot);

        $schedule = $scheduleMillingRow?->schedule;
        $order = $schedule?->order;
        $orderNumber = $order?->order_number;
        $trimmedOrderNumber = $orderNumber ? preg_replace('/^\d{4}-/', '', $orderNumber) : null; //Verwijdert het jaartal en "-"

        $action = $isTimeslotFilled ? 'moveScheduleRow' : 'createScheduleRow';
        $actionParameters = $isTimeslotFilled
            ? sprintf('scheduleId: "%s", scheduleType: "%s", scheduleRowId: "%s"', $schedule->id, $scheduleType->value, $scheduleMillingRow->id)
            : sprintf('date: "%s", scheduleType: "%s", category: "%s"', $date->toDateString(), $scheduleType->value, $category);
    @endphp
    <div wire:click="mountAction('{{ $action }}', { {{ $actionParameters }} })">
    </div>
@endforeach
ChatGPT
ChatGPT - Livewire Snapshot Error Fix
Shared via ChatGPT
Solution:
Okay I solved it, ofcourse it had to be the stupidest thing ever. In the top livewire component there was a div that wasn't properly being closed 🥹
Jump to solution
2 Replies
biebthesecond
biebthesecondOP•4w ago
Anyone? So I'm one step further, its apparently nothing do with basically everything I tried. But there's some confusion in some livewire componenets I'm calling earlier in the page, when I comment the first one out the Actions work again 🤔 
<header class="flex items-center justify-between border-b border-gray-200 px-2 py-4 lg:flex-none">
    <h1 class="text-xl font-semibold leading-6 text-gray-900 dark:text-white">
        <time datetime="{{ $startOfWeek->isoFormat('Y-MM') }}">
            {{ ucfirst($startOfWeek->isoFormat('MMMM')) }} {{ $currentYear }} | Week {{ $currentWeek }}
        </time>
    </h1>

    <div class="flex items-center">
        <livewire:schedule-week-switcher :currentYear="$currentYear" :currentWeek="$currentWeek" />
        <livewire:schedule-week-selector/>

        <livewire:schedule-legend-dropdown :schedules="$schedules"/>
        <livewire:overdue-schedules-dropdown/>
        <livewire:schedule-type-dropdown wire:key="schedule-type-dropdown"/>
    </div>
</header>
<header class="flex items-center justify-between border-b border-gray-200 px-2 py-4 lg:flex-none">
    <h1 class="text-xl font-semibold leading-6 text-gray-900 dark:text-white">
        <time datetime="{{ $startOfWeek->isoFormat('Y-MM') }}">
            {{ ucfirst($startOfWeek->isoFormat('MMMM')) }} {{ $currentYear }} | Week {{ $currentWeek }}
        </time>
    </h1>

    <div class="flex items-center">
        <livewire:schedule-week-switcher :currentYear="$currentYear" :currentWeek="$currentWeek" />
        <livewire:schedule-week-selector/>

        <livewire:schedule-legend-dropdown :schedules="$schedules"/>
        <livewire:overdue-schedules-dropdown/>
        <livewire:schedule-type-dropdown wire:key="schedule-type-dropdown"/>
    </div>
</header>
Solution
biebthesecond
biebthesecond•4w ago
Okay I solved it, ofcourse it had to be the stupidest thing ever. In the top livewire component there was a div that wasn't properly being closed 🥹

Did you find this page helpful?