Subscribe on changes!

Unhandled error during execution of scheduler flush.

avatar
eldair
Oct 10th 2022

Vue version

3.2.40

Link to minimal reproduction

https://sfc.vuejs.org/#__DEV__eNqNVctu00AU/ZUrC8kJ9SMtrEySFsGGBUJC7DALJ54QU8e2xuO0yPK/c+48YrsF1ErNzNz3uS/33vumic6d8BJv3e5l0ahtWhWnppaKvmW7UnytH+gg6xP5UewIrOC/u8j1JMUhoEo8qm/F/p4Gq2CliNKqFIpqWfyEcksb+v6D6Wl1qGWqFswsQF29w7GmGz6vrpbUs67TipquPS76Ik/oc6aO0aGsa7nQV5lVeX1aLOk1Xa9Wq2VAdSUSKgJSDzVOuqLrYZlWg4lFPOqoc3HIuhLRM3VfA0olKtUm1DuYQ8CsVqiugXEtx5JVq0gaHMC9cAEuNVQnIB4tu+rKklmGyVCVAN8wleyE05trN8AEoQUcfcqXtNk6/wRmdM7KToA9XjcwyKJ0S+yREvO0toF8ar5l/DA+t5sqw63Egy3TJfessFhkAe20CiOwjm8pi4o83OEHPvkImeBA8R/n6hKxNT5hT4xt5pYPWdkKWOUsjUDGXElURlbUs4NAgwqQEf7n7KH6MDZoRa4kVNfxpcXxUOLUlJkSeBGtFRddX/lxFFluH6laK2nvlrnVJbxex7j+hXHznEF3+xKjsUk9DjP1tp8+Ut+bVrglnxH6QOpryD4NwwtMoF9fIIURmEnh4dAwfcS5Vrs6/z0BbdND5xBjCoPciwEVVS4elzh0XVOPknvxG1y8UHc4HNvJ5DQEhxL8GCFonMMdrOD5KlNKwsYEAseRQ6I4gM9pYQgu2y5UZz4f0Zqac4jcfU7pxvbCE108XWSz7EnnmKfXTNQc0xjfUZ1KCPo+uM+tj/2Cx7TNNOGSZxsH7hMxL/DMXg1PWRP9ausKu1kPaWoZyBi2lC2Uhy3L79Q7KtW0SRx3VXP/M8JGi+/Ai2VXqeIkQqzIuzfRTfR2FedFq6b0SLSncMf1FBIeU08vPms8BvEsZCgFKi+F/K+zJ7Izh094z5zqQcWcIgHTD80/v0wf6nL+ZQLBfZlevuehZPZ8I2sgcnlFXAl92f0Se+Xi+s/+cBti3Za1Qj/ow6yVp1NUgGKnZxweJl7azI7NHvASvQovAuPk9FEUmekJCFcYG0wjOlXXX5MYTVvOO22aN070RF4P2BZLyqxjvZK4zWdG8byk5G/5tkn97msj/o95Gr3hD2k2u88=

Steps to reproduce

Unfortunately I cannot make a simple reproductible code.

The issue happens when I sort table rows via click on the header. It worked fine on v3.2.39.

This code is responsible for "sorting" rows:

// data is from ajax call
rows.value = data.rows;

This is the template (simplified version producing the same error)

<tbody>
  \\ indexColumn is a fixed const, not computed/ref
  \\ columnsCount doesn't play any role in this issue
  <template v-for="(row, index) in rows" :key="row[indexColumn]">
    <tr>
      <td :colspan="columnsCount">test</td>
    </tr>
    <tr v-if="false">
      <td :colspan="columnsCount">some value</td>
    </tr>
  </template>
</tbody>

By removing v-if="false" part or by resetting rows ref with rows.value = [] and await nextTick() it works fine again

This is the original html on initial load

image

This is after "sorting" - comments are not in correct spots

image

What is expected?

Reused components sorted properly

What is actually happening?

20:10:41.530 runtime-dom.esm-bundler.js:10 
        
       Uncaught (in promise) TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'.
    at insert (runtime-dom.esm-bundler.js:10:16)
    at move (runtime-core.esm-bundler.js:6043:13)
    at move (runtime-core.esm-bundler.js:6006:17)
    at patchKeyedChildren (runtime-core.esm-bundler.js:5980:25)
    at patchChildren (runtime-core.esm-bundler.js:5751:17)
    at processFragment (runtime-core.esm-bundler.js:5455:17)
    at patch (runtime-core.esm-bundler.js:5061:17)
    at patchBlockChildren (runtime-core.esm-bundler.js:5373:13)
    at patchElement (runtime-core.esm-bundler.js:5281:13)
    at processElement (runtime-core.esm-bundler.js:5148:13)
insert @ runtime-dom.esm-bundler.js:10
move @ runtime-core.esm-bundler.js:6043
move @ runtime-core.esm-bundler.js:6006
patchKeyedChildren @ runtime-core.esm-bundler.js:5980
patchChildren @ runtime-core.esm-bundler.js:5751
processFragment @ runtime-core.esm-bundler.js:5455
patch @ runtime-core.esm-bundler.js:5061
patchBlockChildren @ runtime-core.esm-bundler.js:5373
patchElement @ runtime-core.esm-bundler.js:5281
processElement @ runtime-core.esm-bundler.js:5148
patch @ runtime-core.esm-bundler.js:5065
componentUpdateFn @ runtime-core.esm-bundler.js:5678
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5712
callWithErrorHandling @ runtime-core.esm-bundler.js:155
flushJobs @ runtime-core.esm-bundler.js:388
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js:280
queueJob @ runtime-core.esm-bundler.js:274
(anonymous) @ runtime-core.esm-bundler.js:5710
triggerEffect @ reactivity.esm-bundler.js:394
triggerEffects @ reactivity.esm-bundler.js:384
triggerRefValue @ reactivity.esm-bundler.js:1000
set value @ reactivity.esm-bundler.js:1045
(anonymous) @ TheTable.vue:409
Promise.then (async)
setRowsFromRemote @ TheTable.vue:402

and also

20:10:41.530 runtime-dom.esm-bundler.js:10 
        
       Uncaught (in promise) TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'.
    at insert (runtime-dom.esm-bundler.js:10:16)
    at move (runtime-core.esm-bundler.js:6043:13)
    at move (runtime-core.esm-bundler.js:6006:17)
    at patchKeyedChildren (runtime-core.esm-bundler.js:5980:25)
    at patchChildren (runtime-core.esm-bundler.js:5751:17)
    at processFragment (runtime-core.esm-bundler.js:5455:17)
    at patch (runtime-core.esm-bundler.js:5061:17)
    at patchBlockChildren (runtime-core.esm-bundler.js:5373:13)
    at patchElement (runtime-core.esm-bundler.js:5281:13)
    at processElement (runtime-core.esm-bundler.js:5148:13)
insert @ runtime-dom.esm-bundler.js:10
move @ runtime-core.esm-bundler.js:6043
move @ runtime-core.esm-bundler.js:6006
patchKeyedChildren @ runtime-core.esm-bundler.js:5980
patchChildren @ runtime-core.esm-bundler.js:5751
processFragment @ runtime-core.esm-bundler.js:5455
patch @ runtime-core.esm-bundler.js:5061
patchBlockChildren @ runtime-core.esm-bundler.js:5373
patchElement @ runtime-core.esm-bundler.js:5281
processElement @ runtime-core.esm-bundler.js:5148
patch @ runtime-core.esm-bundler.js:5065
componentUpdateFn @ runtime-core.esm-bundler.js:5678
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5712
callWithErrorHandling @ runtime-core.esm-bundler.js:155
flushJobs @ runtime-core.esm-bundler.js:388
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js:280
queueJob @ runtime-core.esm-bundler.js:274
(anonymous) @ runtime-core.esm-bundler.js:5710
triggerEffect @ reactivity.esm-bundler.js:394
triggerEffects @ reactivity.esm-bundler.js:384
triggerRefValue @ reactivity.esm-bundler.js:1000
set value @ reactivity.esm-bundler.js:1045
(anonymous) @ TheTable.vue:409
Promise.then (async)
setRowsFromRemote @ TheTable.vue:402

and finally

20:10:41.530 runtime-dom.esm-bundler.js:449 
        
       Uncaught (in promise) TypeError: Cannot use 'in' operator to search for 'value' in null
    at shouldSetAsProp (runtime-dom.esm-bundler.js:449:12)
    at patchProp (runtime-dom.esm-bundler.js:393:15)
    at patchElement (runtime-core.esm-bundler.js:5327:29)
    at processElement (runtime-core.esm-bundler.js:5148:13)
    at patch (runtime-core.esm-bundler.js:5065:21)
    at patchBlockChildren (runtime-core.esm-bundler.js:5373:13)
    at patchElement (runtime-core.esm-bundler.js:5281:13)
    at processElement (runtime-core.esm-bundler.js:5148:13)
    at patch (runtime-core.esm-bundler.js:5065:21)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5678:17)
shouldSetAsProp @ runtime-dom.esm-bundler.js:449
patchProp @ runtime-dom.esm-bundler.js:393
patchElement @ runtime-core.esm-bundler.js:5327
processElement @ runtime-core.esm-bundler.js:5148
patch @ runtime-core.esm-bundler.js:5065
patchBlockChildren @ runtime-core.esm-bundler.js:5373
patchElement @ runtime-core.esm-bundler.js:5281
processElement @ runtime-core.esm-bundler.js:5148
patch @ runtime-core.esm-bundler.js:5065
componentUpdateFn @ runtime-core.esm-bundler.js:5678
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5712
callWithErrorHandling @ runtime-core.esm-bundler.js:155
flushJobs @ runtime-core.esm-bundler.js:388
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js:280
queueJob @ runtime-core.esm-bundler.js:274
(anonymous) @ runtime-core.esm-bundler.js:5710
triggerEffect @ reactivity.esm-bundler.js:394
triggerEffects @ reactivity.esm-bundler.js:384
triggerRefValue @ reactivity.esm-bundler.js:1000
set value @ reactivity.esm-bundler.js:1045
updateLoadingData @ TheTable.vue:287
(anonymous) @ TheTable.vue:416
Promise.finally (async)
setRowsFromRemote @ TheTable.vue:416

System Info

No response

Any additional comments?

Cannot reproduce it on production server. I'm now investigating node version.

avatar
posva
Oct 10th 2022

The reproduction doesn't seem to showcase the error and is also quite convoluted. Can you open a new issue if you manage to reproduce this in a boiled-down reproduction? Thanks

avatar
eldair
Oct 10th 2022

Yeah, you're right. I am seeing some issue concerning reusability of rendered code in v-for but I am still unable to make a simple reproduction. I will open a new issue as soon as I do.

GitHub Track