Vue
Error involving changing rendered list of items (Unhandled error during execution of scheduler flush) #7740
-
Vue version3.2.47 Link to minimal reproductionSteps to reproduce
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 InfoSystem:
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.47Any additional comments?No response |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
A quick look at that lib's Vue 2 integration 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().handlerMoving this to discussions as it's basically a Usage question. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for your help! |
Beta Was this translation helpful? Give feedback.
smooth-dndre-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 integration 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).
Moving this to discussions as it's basically a Usage question.