Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. #10813

nongtan7898 · 2024-04-26T09:33:20Z

Vue version

3.4.25

Link to minimal reproduction

https://play.vuejs.org/#eNqtVm2L00AQ/itLVGghxneFeginV0HxTjnrCxgpazJtVze7Ibu53nnchxNB/X4oviCoiKAIeqKk/yY/xdlN79qksSjYD2V3Zp5nXnZ2J5vOYhx7ayk4LWdBQxRzquHcwpH9pS98saCChMUa17Aey0STEHo05ZpsGi0hQ6qDQcvsCP66fdAXZIKGVDMp9uWEULUhAjKgIuSQNAQMb1KegkskD+2qOTElhPVIY8hEKIfewYbvHIg2OvQehylm32l6S1RTK280S2h0NqRMk39i8EJQOpEbjebZCdPWZPnvlKWIOBX9lPZhqiLFL4SARZS3iO/4jlvW4TnowolR56PHefYuHz01/9nPPPuQZ7t59j7Ptu0Ct4/y0bM8+2oNRnn2cYaRiZ4suBDzOc928uxJHdEL42D0lHSvdxZXO12SZ8/z7Bcak257ZcnsMQo03SbdztXO4hUjqbLUOm+blP5nNhcZ15BAaDgbFoxIxGBa4xBtNt8tFwq/WLod0l1evF0XdbPWyzWp9EW2XntKeiBThX2tjNadUXMQfT1YBpFWC4/XZbm9cuOvasclDZnor0Igk8KTtf2BZTHJYWajRzY53CJ3tXSe581QxokMQClkraPLXtuovlmKT1b+5g9ECmhi3gBD8tg6fmlD2W3NmD6ERE7nMGmCt3n2ak4nVphnk6F9JvDNmrlfhPRYonQRHUJfWppdew5Ivz3DZO5qjb05tMzW9sWe5H0NFl/JMRYvDBZyx6b4usYyTmCNYefsFd/kiAdWJDj2OgPbKu3Lu0DyNBJL0EPKO2XYJgkwKbVCI/uShPpwAAKvDfITTRN8tG0YXcq571Ro69D3ZLhxmENPlwjunHDJSZecdsmZuzUkQxZq2yXHjh4q44675NRcxPEqwniaizhVARx1ybH60O6WdjjtJOe3W0QnOJ1KMyXV8lZB36NclZUJqFgKxdawQhXk1mSgTByHAHHFkkURhMy28JS8gJh/nEULR8bD2HEdrQIpeqzv3VdS4AC3be87gYxihhP2amwGkvKd/QvhO3i6cnjZyqY8IGYAwYMa+X21bmS+cw3Tg2QN9tvRd4rKFur29RXs+illJMOUo/Uc5SoobNdiaBqz86n9MJiys9Feisw3Bz5RHdVe14AVHidlAt2rjLHGr5gLc1KfhHvCO2lxWFBn6zeuanY4

Steps to reproduce

What is expected?

Solved my problem.

What is actually happening?

runtime-core.esm-bundler.js:47 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://github.com/vuejs/core .
at
at <Establishment onVnodeUnmounted=fn ref=Ref< Proxy(Object) {__v_skip: true} > >
at
at <Dashboard onVnodeUnmounted=fn ref=Ref< Proxy(Object) {toggleAside: ƒ, …} > >
at
at

System Info

No response

Any additional comments?

No response

jacekkarczmarczyk · 2024-04-26T09:41:21Z

Your reproduction doesn't show that error

Tiahin · 2024-04-26T10:35:06Z

Looks like the problem is

runtime-dom.esm-bundler.js:593 Uncaught (in promise) TypeError: Cannot convert object to primitive value
at Proxy.join ()
at Proxy.toString ()
at patchAttr (runtime-dom.esm-bundler.js:593:10)
at patchProp (runtime-dom.esm-bundler.js:760:5)
at patchProps (runtime-core.esm-bundler.js:5782:11)
at patchElement (runtime-core.esm-bundler.js:5663:9)
at processElement (runtime-core.esm-bundler.js:5485:7)
at patch (runtime-core.esm-bundler.js:5342:11)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:6110:9)
at ReactiveEffect.run (reactivity.esm-bundler.js:177:19)

in

function patchAttr(el, key, value, isSVG, instance) {
if (isSVG && key.startsWith("xlink:")) {
  if (value == null) {
    el.removeAttributeNS(xlinkNS, key.slice(6, key.length));
  } else {
    el.setAttributeNS(xlinkNS, key, value);
  }
} else {
  const isBoolean = isSpecialBooleanAttr(key);
  if (value == null || isBoolean && !includeBooleanAttr(value)) {
    el.removeAttribute(key);
  } else {
  --> __el.setAttribute(key, isBoolean ? "" : value);__
  }
}
}

The problem was detected in v3.4.24. This was not the case in v3.4.23.

edison1105 · 2024-04-27T01:28:19Z

Please provide a runnable reproduction

Tennyleaz · 2024-05-02T01:55:19Z

Same error happens to me when updating from v3.4.23 to latest v3.4.26.

Uncaught (in promise) TypeError: can't convert Proxy to string
    NuxtJS 80
[runtime-dom.esm-bundler.js:593:9](http://localhost:3000/_nuxt/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js)
    NuxtJS 42

seattlewayne · 2024-05-02T21:51:31Z

I am seeing the same failure. I don't (yet) have a simple reproduction case to share.

nongtan7898 · 2024-05-04T03:54:52Z

This is my version

"dependencies": {
"@floating-ui/vue": "^1.0.6",
"@fortawesome/fontawesome-svg-core": "^6.5.2",
"@fortawesome/free-brands-svg-icons": "^6.5.2",
"@fortawesome/free-regular-svg-icons": "^6.5.2",
"@fortawesome/free-solid-svg-icons": "^6.5.2",
"@fortawesome/vue-fontawesome": "^3.0.6",
"axios": "^1.6.8",
"bootstrap": "^5.3.3",
"datatables.net": "^2.0.6",
"datatables.net-dt": "^2.0.6",
"jquery": "^3.7.1",
"primevue": "^3.52.0",
"sweetalert2": "^11.10.8",
"vue": "^3.4.26",
"vue-router": "^4.3.2",
"vuex": "^4.1.0",
"xlsx": "^0.18.5"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.4",
"autoprefixer": "^10.4.19",
"postcss": "^8.4.38",
"tailwindcss": "^3.4.3",
"vite": "^5.2.11"
},

AtesComp · 2024-05-06T23:08:25Z

Same issues:

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://github.com/vuejs/core . 
  at <BaseTransition onAfterEnter=fn<onAfterEnter> onAfterLeave=fn<onAfterLeave> appear=true  ... > 
  at <Transition name="fade-transition" appear=true persisted=true  ... > 
  at <MaybeTransition appear=true persisted=true transition="fade-transition"  ... > 
  at <VOverlay ref=Ref< Proxy(Object) {…} > class="v-tooltip" style= {}  ... > 
  at <VTooltip location="bottom" > 
  at <RouterLink key="/home" to="/home" custom="" > 
  at <VListChildren items= [] returnObject=false > 
  at <VList> 
  at <VNavigationDrawer modelValue=true onUpdate:modelValue=fn rail=false  ... > 
  at <VApp key=0 theme="dark" > 
  at <AppConsole>
  | Promise.then (async) |   |  
  | setThemeName | @ | stateTheme.js:15
  | initialize | @ | AppConsole.vue:321
  | await in initialize (async) |   |  
  | (anonymous) | @ | AppConsole.vue:421
  | (anonymous) | @ | main:136

...followed by...

Uncaught (in promise) TypeError: Cannot convert object to primitive value
    at Proxy.join (<anonymous>)
    at Proxy.toString (<anonymous>)
    at patchAttr (chunk-KRQ7UQDJ.js?v=ba9c5e9b:10196:10)
    at patchProp (chunk-KRQ7UQDJ.js?v=ba9c5e9b:10360:5)
    at patchProps (chunk-KRQ7UQDJ.js?v=ba9c5e9b:7223:11)
    at patchElement (chunk-KRQ7UQDJ.js?v=ba9c5e9b:7104:9)
    at processElement (chunk-KRQ7UQDJ.js?v=ba9c5e9b:6926:7)
    at patch (chunk-KRQ7UQDJ.js?v=ba9c5e9b:6783:11)
    at ReactiveEffect.componentUpdateFn [as fn] (chunk-KRQ7UQDJ.js?v=ba9c5e9b:7553:9)
    at ReactiveEffect.run (chunk-KRQ7UQDJ.js?v=ba9c5e9b:435:19)
  | Promise.then (async) |   |  
  | setThemeName | @ | stateTheme.js:15
  | initialize | @ | AppConsole.vue:321
  | await in initialize (async) |   |  
  | (anonymous) | @ | AppConsole.vue:421
  | (anonymous) | @ | main:136

Code Snip...

export default function useAppTheme() {
  function setTheme(theme) {
    cstate.theme = theme;
    darkWatch.value = cstate.theme.current.value.dark;
  };
  function setThemeName(name) {
    cstate.theme.global.name.value = name; // <--- indicated here
                                  ^---------------
    darkWatch.value = cstate.theme.current.value.dark;
  };
...

Changing

cstate.theme.global.name.value = name;

to

cstate.theme.global.name = name;

just moves the error elsewhere and breaks overall theme changes (sub-components don't change as follows). In any event, theme changes are broken--the page does not update using the new theme name. Sub-components theme changes on a move to another component.

The app works without issues using [email protected].

A minimal viable example is not possible from this code base. As a follow up, I will incrementally test with later versions to hopefully narrow down the breaking change.

AtesComp · 2024-05-07T15:14:24Z

The warnings and errors in #10813 (comment) are introduced in [email protected]

While the example demonstrates the issue within Vuetify3 components, the Vue3 version packaged is the controlled change applied by npm update after modifying the projects package.json file.

Another observed problem (version above 3.4.23) is when moving the mouse between a VNavigationDrawer and a VMain holding a RouterView produces the following:

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://github.com/vuejs/core . 
  at <VListChildren items= [] returnObject=false > 
  at <VList> 
  at <VNavigationDrawer modelValue=true onUpdate:modelValue=fn rail=false  ... > 
  at <VApp key=0 theme="light" > 
  at <AppConsole>

...and...

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'emitsOptions')
    at shouldUpdateComponent (chunk-UQBQ5GNM.js?v=273eef58:2556:27)
    at updateComponent (chunk-UQBQ5GNM.js?v=273eef58:7425:9)
    at processComponent (chunk-UQBQ5GNM.js?v=273eef58:7373:7)
    at patch (chunk-UQBQ5GNM.js?v=273eef58:6828:11)
    at patchKeyedChildren (chunk-UQBQ5GNM.js?v=273eef58:7783:9)
    at patchChildren (chunk-UQBQ5GNM.js?v=273eef58:7660:9)
    at processFragment (chunk-UQBQ5GNM.js?v=273eef58:7336:9)
    at patch (chunk-UQBQ5GNM.js?v=273eef58:6802:9)
    at patchKeyedChildren (chunk-UQBQ5GNM.js?v=273eef58:7783:9)
    at patchChildren (chunk-UQBQ5GNM.js?v=273eef58:7697:11)

edison1105 · 2024-05-08T01:17:04Z

@nongtan7898's reproduction can't reproduce that error.
@AtesComp
Please provide a minimal reproduction.

seattlewayne · 2024-05-08T22:19:12Z

I can't speak for the other folks, but updating to Vue v3.4.27 fixed this issue for me.

zhangwannihao · 2024-05-09T06:06:04Z

me too , updating to Vue v3.4.27 fixed this issue for me.

nongtan7898 · 2024-05-11T16:54:55Z

I'm using vite with vue (pinia or vuex) vue-router and datatable.net

This is my project
https://github.com/nongtan7898/vue-project

@edison1105 @AtesComp @jacekkarczmarczyk

edison1105 · 2024-05-12T01:32:55Z

@nongtan7898
Thanks for your reproduction but it seems not related to this issue.
You should initialize the DataTable after the data is rendered.

watch(
  () => store._getData,
  async () => {
+    await nextTick();
    await $("#myTable").DataTable();
  }
);

@seattlewayne @zhangwannihao
Thank you for your feedback.

If there is still no reproduction that can be reproduced, this one will be closed.

nongtan7898 · 2024-05-12T12:25:17Z

Thank you it's ok But if I want to add data to data, it still gives the same error even though I add

await nextTick();

Go in. Please take a look. I have commit in github.

@edison1105

AtesComp · 2024-05-15T20:24:38Z

I've just checked against 3.4.27 and the errors have evaporated.

Having read the release info for 3.4.27, it leaves me perplexed about the error. Something in the code changes effectively "fixed" the cause of the error. I've looked over the various changed code files with a diff between 3.4.23 and 3.4.24 and between 3.4.26 and 3.4.27.

The effect should be due to a common file changed. I'm looking at file "packages/compiler-sfc/src/script/resolveType.ts" as a likely candidate.

It's near impossible to reproduce as a minimal reproduction with my code as it would requires many man-hours of time to pair down (no one here is gonna pay for that ;) ).

nongtan7898 · 2024-05-17T08:01:41Z

Thank you it's ok But if I want to add data to data, it still gives the same error even though I add

await nextTick();

Go in. Please take a look. I have commit in github.

@edison1105

edison1105 · 2024-05-17T08:25:52Z

@nongtan7898
I think DataTable() has modified the DOM structure, causing vnode.el to be inconsistent with the actual DOM structure, which results in update errors. This approach is incorrect. Since you're using Vue, we should avoid directly manipulating the DOM structure.

edison1105 · 2024-05-17T08:26:57Z

@seattlewayne @zhangwannihao
Thanks.
Close this one.

edison1105 added the need more info Further information is requested label Apr 27, 2024

edison1105 closed this as not planned Won't fix, can't repro, duplicate, stale May 17, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. #10813

Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. #10813

nongtan7898 commented Apr 26, 2024

jacekkarczmarczyk commented Apr 26, 2024

Tiahin commented Apr 26, 2024 •

edited

edison1105 commented Apr 27, 2024

Tennyleaz commented May 2, 2024

seattlewayne commented May 2, 2024

nongtan7898 commented May 4, 2024 •

edited

AtesComp commented May 6, 2024

AtesComp commented May 7, 2024

edison1105 commented May 8, 2024

seattlewayne commented May 8, 2024

zhangwannihao commented May 9, 2024

nongtan7898 commented May 11, 2024

edison1105 commented May 12, 2024

nongtan7898 commented May 12, 2024 •

edited

AtesComp commented May 15, 2024

nongtan7898 commented May 17, 2024

edison1105 commented May 17, 2024

edison1105 commented May 17, 2024

Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. #10813

Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. #10813

Comments

nongtan7898 commented Apr 26, 2024

Vue version

Link to minimal reproduction

Steps to reproduce

What is expected?

What is actually happening?

System Info

Any additional comments?

jacekkarczmarczyk commented Apr 26, 2024

Tiahin commented Apr 26, 2024 • edited

edison1105 commented Apr 27, 2024

Tennyleaz commented May 2, 2024

seattlewayne commented May 2, 2024

nongtan7898 commented May 4, 2024 • edited

AtesComp commented May 6, 2024

AtesComp commented May 7, 2024

edison1105 commented May 8, 2024

seattlewayne commented May 8, 2024

zhangwannihao commented May 9, 2024

nongtan7898 commented May 11, 2024

edison1105 commented May 12, 2024

nongtan7898 commented May 12, 2024 • edited

AtesComp commented May 15, 2024

nongtan7898 commented May 17, 2024

edison1105 commented May 17, 2024

edison1105 commented May 17, 2024

Tiahin commented Apr 26, 2024 •

edited

nongtan7898 commented May 4, 2024 •

edited

nongtan7898 commented May 12, 2024 •

edited