Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. about core

[jacekkarczmarczyk]

Your reproduction doesn't show that error

[Tiahin]

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]

Please provide a runnable reproduction

[Tennyleaz]

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]

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

[nongtan7898]

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]

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]

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]

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

[seattlewayne]

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

[zhangwannihao]

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

[nongtan7898]

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]

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

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]

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]

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]

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

@seattlewayne @zhangwannihao
Thanks.
Close this one.