Uncaught Snapshot missing on Livewire component - nested component items

[igmltd]

Hi,

Doesn't seem to work when the group items are a nested component, getting this error in the console

"Uncaught Snapshot missing on Livewire component with id: KLeG0kT7hyyZB9XYWnMp"

Heres a sample layout:

<div wire:sortable="updateGroupOrder" wire:sortable-group="updateTaskOrder" wire:sortable.options="{ animation: 50 }">
    @foreach ($groups as $group)
        <div wire:sortable.item="{{ $group->id }}" wire:key="group-{{ $group->id }}">
            <h4>{{ $group->label }}</h4>
            <button wire:sortable.handle>drag group</button>
             <div wire:sortable-group.item-group="{{ $group->id }}" wire:sortable-group.options="{ animation: 100 }">
                @foreach ($group->tasks()->orderBy('order')->get() as $task)    
                    
                    
                      <livewire:nested-items wire:key="task-{{ $task->id }}" /> 

                
                @endforeach
            </div>
        </div>
    @endforeach
</div>

Sample nested component blade

<div wire:sortable-group.item="{{ $task->id }}" >
                        <span>{{ $task->title }}</span>
    <button wire:sortable-group.handle>drag item</button>
</div>

Works fine when items not a nested component, any help or guidance would be much appreciated

Using Livewire 3 and latest release of this package.

thanks

[jasonlbeggs]

I'm running into this issue as well. Curious to know if there's a fix for it!

[gdebrauwer]

I am unable to reproduce this issue. Could you provide the (minimal) code to reproduce this? (maybe just with array data instead of database records, to keep it simple)

[ijpatricio]

Hey @gdebrauwer , nice to meet you!

Just got to know about this repo, much needed!

I went the same rabbit hole of having nested LW components inside a parent LW, using SortableJS on the client.

Check https://github.com/ijpatricio/playground-wire-sortable and https://youtu.be/P5pfcn67wI4?t=928 (video at relevant timestamp)

I ended up reaching a naive but working solution!

Not using @foreach, because Livewire will hook into that and add markers for its morphDom. If we properly use the wire:key, those won't be needed at all.

Hope this helps.