Snapshot missing when dragging livewire component in sortable container

[casjonker]

I ran into a bug where using the alpine sort plugin with a nested livewire component in one of the sortable child elements. Whenever I drag an element with a nested livewire component to and empty container or to the end of a container, I get the following error:

Uncaught Snapshot missing on Livewire component with id: ...

So clearly Livewire is having trouble finding the moved HTML element. After some debugging I noticed that the element is definitely still in the DOM. Though i also noticed, that in both cases (dragging the element to an empty container and dragging it to the last position in a container) SortableJS puts the element after some DOM comment... My assumption is that Livewire is looking for the element within this comment nodes. By patching the positioning of the dropped element within the comment node, i actually managed to fix it. Here's an example of my code:

@script
<script>
    $js('dirtyAlpineSortLiveWireHotfix', ({ to }) => {
        let lastNode = to.lastChild
        for (let i = 0; i < to.childNodes.length; i++) {
            if (lastNode.nodeType === Node.COMMENT_NODE) {
                to.removeChild(lastNode);
                to.appendChild(lastNode);
                break;
            }
            lastNode = lastNode.previousSibling
        }
    });
</script>
@endscript
<div x-sort
	...
	x-sort:config="{
		onEnd: $js.dirtyAlpineSortLiveWireHotfix
	}"
>
	@foreach(..) 
		...
	@endforeach
</div>  

Maybe a more neat fix could be implemented on the alpine sort plugin?