Unhandled error during execution of scheduler flush.

[faxinwang]

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.

[posva]

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

[edison1105]

@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.

IMO, this way of setting the ref is wrong.

[faxinwang]

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

[edison1105]

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.

[faxinwang]

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.

[edison1105]

I have no idea.ping @HcySunYang

[posva]

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