Vue version

3.2.47

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-srpmvm?file=src%2FApp.vue,src%2Fcomponents%2FSortableList.vue&terminal=dev

Steps to reproduce

1. Open browser console
2. Drag to reorder items

What is expected?

No errors.

What is actually happening?

Error occurs:

Uncaught (in promise) DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

System Info

System:
    OS: macOS 12.6.2
    CPU: (8) arm64 Apple M1
    Memory: 74.11 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.12.1 - ~/Library/Caches/fnm_multishells/60505_1676558035703/bin/node
    Yarn: 1.22.19 - ~/Library/Caches/fnm_multishells/60505_1676558035703/bin/yarn
    npm: 8.19.2 - ~/Library/Caches/fnm_multishells/60505_1676558035703/bin/npm
  Browsers:
    Chrome: 109.0.5414.119
    Firefox: 108.0.2
    Safari: 16.2
  npmPackages:
    vue: ^3.2.47 => 3.2.47

Any additional comments?

No response

smooth-dnd re-orders the HTML elements that Vue controls, so when Vue re-renders, the elements are not in the place Vue thinks they are, messing up its patch phase.

A quick look at that lib's Vue 2 integraation tells me you need to switch the default drop handler with the "react" one (which isn't really react-specific, it just skips the part that's messing with the DOM).

import { smoothDnd, drophandlers } from 'smooth-dnd'
smoothDnd.dropHandler = dropHandlers.reactDropHandler().handler

Moving this to discussions as it's basically a Usage question.