Uncaught Snapshot missing on Livewire component with id: 5k8cfyjIWCqpkMXB2LHv
How do you fix this? I have two tables in my infolist
My problem is that if there is two table livewire component the modal doesnt show up and with the error
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: 5k8cfyjIWCqpkMXB2LHvUncaught 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:
In my blade component:
And in my infolist instead of
<?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\ActionsInfolists\Components\Actions I make Infolists\Components\Livewire::make(EditPurposeAction::class),Infolists\Components\Livewire::make(EditPurposeAction::class),