Uncaught Snapshot missing on Livewire component with id: 5k8cfyjIWCqpkMXB2LHv

How do you fix this? I have two tables in my infolist

Infolists\Components\Tabs\Tab::make('Assets')
                            ->icon('heroicon-m-square-3-stack-3d')
                            ->schema([
                                Infolists\Components\Livewire::make(InScopeAssetTable::class, ['programId' => $this->program->id]),
                                Infolists\Components\Livewire::make(OutScopeAssetTable::class, ['programId' => $this->program->id])
                            ]),

Infolists\Components\Tabs\Tab::make('Assets')
                            ->icon('heroicon-m-square-3-stack-3d')
                            ->schema([
                                Infolists\Components\Livewire::make(InScopeAssetTable::class, ['programId' => $this->program->id]),
                                Infolists\Components\Livewire::make(OutScopeAssetTable::class, ['programId' => $this->program->id])
                            ]),

My problem is that if there is two table livewire component the modal doesnt show up and with the error Uncaught Snapshot missing on Livewire component with id: 5k8cfyjIWCqpkMXB2LHv . If I remove one table livewire component it works. Can someone please help. Thank youu!

Solution:

I have make an alternative but it works for now: ```php <?php namespace App\Filament\Resources\SecunaPentestResource\Actions;...

Jump to solution

16 Replies

awcodes•6mo ago

You might need to give the livewire components a wire:key. But that seems odd to me.

jaocero•6mo ago

Both my table components have the same format like this but they are separated file. Is this correct?

<div>
    {{ $this->table }}
</div>

<div>
    {{ $this->table }}
</div>

I put different wire:key in each div but the error also persist

awcodes•6mo ago

Yea, it weird that live wire is losing the reference. Wait should these both be in the same tab? It’s something to do with the tabs. I think. And not your components. At least not directly.

jaocero•6mo ago

yes they are in the same am I doing wrong?

jaocero•6mo ago

the purpose tab is where the modal Edit Purpose and it's not showing up thats where the error shows but if I remove one table the Edit Purpose modal shows up

awcodes•6mo ago

No, that should be ok. What is the code in the purpose tab?

jaocero•6mo ago

It's a bit long but I shortened but yeah this is what I do base on the docs:

Infolists\Components\Tabs\Tab::make('Purpose')
    ->icon('heroicon-m-document-text')
    ->schema([
        Infolists\Components\Actions::make([
            Infolists\Components\Actions\Action::make('edit_purpose')
                ->label('Edit Purpose')
                ->icon('heroicon-m-pencil-square')
                ->modalIcon('heroicon-s-pencil-square')
                ->modalDescription('Edit the purpose of the program.')
                ->modalSubmitActionLabel('Save Changes')
                ->form([
                    //my form here
                ])
                ->action(),
        ]),
    ]);

Infolists\Components\Tabs\Tab::make('Purpose')
    ->icon('heroicon-m-document-text')
    ->schema([
        Infolists\Components\Actions::make([
            Infolists\Components\Actions\Action::make('edit_purpose')
                ->label('Edit Purpose')
                ->icon('heroicon-m-pencil-square')
                ->modalIcon('heroicon-s-pencil-square')
                ->modalDescription('Edit the purpose of the program.')
                ->modalSubmitActionLabel('Save Changes')
                ->form([
                    //my form here
                ])
                ->action(),
        ]),
    ]);

awcodes•6mo ago

Hmm, I’m not seeing anything obviously out of the norm. If you have a repo you can share so I could maybe get a more complete view of everything I might be able to help more. But based on what you’ve shared I’m kinda stumped.

Solution

jaocero•6mo ago

I have make an alternative but it works for now:

<?php

namespace App\Filament\Resources\SecunaPentestResource\Actions;

use Filament\Actions\Action;
use Filament\Actions\Concerns\InteractsWithActions;
use Filament\Actions\Contracts\HasActions;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Illuminate\Contracts\View\View;
use Filament\Forms;
use Livewire\Component;

class EditPurposeAction extends Component implements HasForms, HasActions
{
    use InteractsWithActions;
    use InteractsWithForms;

    public function editPurposeAction(): Action
    {
        return Action::make('editPurpose')
            ->form([
                Forms\Components\CheckboxList::make('primary_reason_selected')
                    ->label('Why are you applying for a pentest?')
                    ->required()
                    ->options([
                        'regulatory compliance' => 'Regulatory compliance',
                        'product launch' => 'Product launch',
                        'pass vendor assessment' => 'Pass vendor assessment',
                        'find vulnerabilities' => 'Find vulnerabilities',
                        'others' => 'Others',
                    ]),
            ])
            ->action(function () {
                dd('Hello');
            });
    }

    public function render(): View
    {
        return view('infolists.components.edit-purpose');
    }
}

<?php

namespace App\Filament\Resources\SecunaPentestResource\Actions;

use Filament\Actions\Action;
use Filament\Actions\Concerns\InteractsWithActions;
use Filament\Actions\Contracts\HasActions;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Illuminate\Contracts\View\View;
use Filament\Forms;
use Livewire\Component;

class EditPurposeAction extends Component implements HasForms, HasActions
{
    use InteractsWithActions;
    use InteractsWithForms;

    public function editPurposeAction(): Action
    {
        return Action::make('editPurpose')
            ->form([
                Forms\Components\CheckboxList::make('primary_reason_selected')
                    ->label('Why are you applying for a pentest?')
                    ->required()
                    ->options([
                        'regulatory compliance' => 'Regulatory compliance',
                        'product launch' => 'Product launch',
                        'pass vendor assessment' => 'Pass vendor assessment',
                        'find vulnerabilities' => 'Find vulnerabilities',
                        'others' => 'Others',
                    ]),
            ])
            ->action(function () {
                dd('Hello');
            });
    }

    public function render(): View
    {
        return view('infolists.components.edit-purpose');
    }
}

In my blade component:

<div>
    {{ $this->editPurposeAction }}

    <x-filament-actions::modals />
</div>

<div>
    {{ $this->editPurposeAction }}

    <x-filament-actions::modals />
</div>

And in my infolist instead of Infolists\Components\Actions I make Infolists\Components\Livewire::make(EditPurposeAction::class),

awcodes•6mo ago

If it works it works. Glad you figured it out. 🙂

jaocero•6mo ago

Thank you for the help btw👌

jaocero•6mo ago

Hello @awcodes just to ask a question here it's not related to the issue but I thought I would ask here. How can I rerender my infolist after successfull action in my EditPurposeAction::class . Before it actually rerender my component inside the ScopeReview where the infolist is found. Now the thing is my EditPurposeAction is in another class and I don't know how can I rerender my infolist after success

Azorky•3mo ago

Hey @jaocero , How were you able to solve this exactly? I'm following the same steps as you here, but my modal is not opening at all now

Hisham Elsayad•3mo ago

@Azorky I solved it by giving the components a key

KeyMe•3mo ago

oh wow that actually worked. bcs i swear i tried it before..

Azorky•3mo ago

Thank you!

Gaming

Programming

Uncaught Snapshot missing on Livewire component with id: 5k8cfyjIWCqpkMXB2LHv