Subscribe on changes!

Unhandled error during execution of scheduler flush.

avatar
Apr 7th 2021

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 ):

  1. ctrl shift I open the browser devtool console tab.
  2. 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.

avatar
Apr 7th 2021

Please open the bug in Quasar first or open a bug report here without Quasar.

avatar
Apr 7th 2021

@posva demo https://codepen.io/edison1105/pen/yLgzgxQ?editors=1010 steps:

  • open Console
  • click X of the last tab to remove the tab

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.

image

IMO, this way of setting the ref is wrong.

avatar
Apr 8th 2021

thank you for your codepen demo, then this may be a bug from Quasar.

avatar
Apr 8th 2021

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.

avatar
Apr 8th 2021

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.

avatar
Apr 8th 2021

I have no idea.ping @HcySunYang

avatar
Apr 12th 2021

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