Unhandled error during execution of scheduler flush.
Version
3.0.11
Reproduction link
https://codepen.io/faxin/pen/NWdaRoZ
Steps to reproduce
in the given codepen( https://codepen.io/faxin/pen/NWdaRoZ ):
- ctrl shift I open the browser devtool console tab.
- click the 'x' in one of the tabs in the UI of sandbox.
you will see the reported errror in the console tab of browser devtools.
In my real project, the full warning and error message is as follow:
runtime-core.esm-bundler.js?9e79:38 [Vue warn]:
Unhandled error during execution of ref function
[Vue warn]: Unhandled error during execution of scheduler flush.
This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next
Index.vue?8b24:43 Uncaught (in promise) TypeError:
Cannot set property 'tab' of undefined
at ref (Index.vue?8b24:43)
at callWithErrorHandling (runtime-core.esm-bundler.js?9e79:154)
at setRef (runtime-core.esm-bundler.js?9e79:3712)
at unmount (runtime-core.esm-bundler.js?9e79:4724)
at patchKeyedChildren (runtime-core.esm-bundler.js?9e79:4558)
at patchChildren (runtime-core.esm-bundler.js?9e79:4425)
at processFragment (runtime-core.esm-bundler.js?9e79:4171)
at patch (runtime-core.esm-bundler.js?9e79:3784)
at patchKeyedChildren (runtime-core.esm-bundler.js?9e79:4506)
at patchChildren (runtime-core.esm-bundler.js?9e79:4449)
runtime-core.esm-bundler.js?9e79:1041 Uncaught (in promise) TypeError:
Cannot read property 'emitsOptions' of null
at shouldUpdateComponent (runtime-core.esm-bundler.js?9e79:1041)
at updateComponent (runtime-core.esm-bundler.js?9e79:4230)
at processComponent (runtime-core.esm-bundler.js?9e79:4186)
at patch (runtime-core.esm-bundler.js?9e79:3791)
at patchKeyedChildren (runtime-core.esm-bundler.js?9e79:4506)
at patchChildren (runtime-core.esm-bundler.js?9e79:4449)
at patchElement (runtime-core.esm-bundler.js?9e79:4062)
at processElement (runtime-core.esm-bundler.js?9e79:3871)
at patch (runtime-core.esm-bundler.js?9e79:3788)
at componentEffect (runtime-core.esm-bundler.js?9e79:4368)
What is expected?
the :ref="tab => tabs[idx].tab = tab"
works correctly.
What is actually happening?
the tabs[idx]
is undefined.
I don't know if it is really a bug, but the warning message says that it is likely a Vue internals bug, so I issued it here.
@posva demo https://codepen.io/edison1105/pen/yLgzgxQ?editors=1010 steps:
- open Console
- click
X
of the lasttab
to remove thetab
I think this is not a bug
if ref
is a function it will called when unset ref in unmount
} else if (isFunction(ref)) {
callWithErrorHandling(ref, owner, ErrorCodes.FUNCTION_REF, [value, refs])
}
note the ref
is
ref: tab => tabs[idx].tab = tab
When deleting the last tab
, the tabs
will be changed, and then the patch
is called. the error appears when the above set ref method is called in unmount
because tabs[idx]
has been deleted before patch
is called.
IMO, this way of setting the ref is wrong.
thank you for your codepen demo, then this may be a bug from Quasar.
I don't think so. see my demo without Quasar
still got a warning in the console.
I still think this is not a bug.
I see it, showing the same error
vue.global.prod.js:1 TypeError: Cannot set property 'tab' of undefined
at ref (eval at ea (vue.global.prod.js:1), <anonymous>:24:35)
so if this is not the correct way of setting a bunch of ref,what it the correct way to do it. Or how to access the children of a specific component since the $children attr is remove in vue3.
Here is the correct way of setting an array of refs
: https://v3.vuejs.org/guide/composition-api-template-refs.html#usage-inside-v-for