[Vue warn]: Unhandled error during execution of scheduler flush.
Version
3.1.0-beta.3
Reproduction link
Steps to reproduce
Hey Vue team - too much work to get a JSFiddle up because my example involves vuex and vue-router and an external REST api to provide a user object along with JWT. But if you read through the SFC link for my basic ProfilePage/index.vue
component - you should be able to understand whats going on. The resultant warning message says to open an issue because it is likely a Vue internals bug.
Steps:
- Hit Logout button
- Warning appears in console
Here is my minimal auth-module.js
:
const auth = {
actions: {
logout({commit}) {
localStorage.removeItem("user");
localStorage.removeItem("token");
commit("logout");
}
},
mutations: {
logout(state) {
state.user = null;
state.status.loggedIn = false
}
}
}
What is expected?
No warning is expected.
What is actually happening?
Here are the warnings in console:
[Vue warn]: Unhandled error during execution of render function
at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref<
Object { }
> >
at <RouterView>
at <App>
[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
at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref<
Object { }
> >
at <RouterView>
at <App>
Uncaught (in promise) TypeError: $setup.user is null
_sfc_render index.vue:4
renderComponentRoot runtime-core.esm-bundler.js:846
componentEffect runtime-core.esm-bundler.js:4359
reactiveEffect reactivity.esm-bundler.js:42
callWithErrorHandling runtime-core.esm-bundler.js:154
flushJobs runtime-core.esm-bundler.js:384
promise callback*queueFlush runtime-core.esm-bundler.js:286
queueJob runtime-core.esm-bundler.js:280
run reactivity.esm-bundler.js:183
trigger reactivity.esm-bundler.js:189
set2 reactivity.esm-bundler.js:300
logout auth-module.js:75
wrappedMutationHandler vuex.esm-bundler.js:808
commitIterator vuex.esm-bundler.js:438
commit vuex.esm-bundler.js:437
_withCommit vuex.esm-bundler.js:596
commit vuex.esm-bundler.js:436
boundCommit vuex.esm-bundler.js:376
commit vuex.esm-bundler.js:760
logout auth-module.js:39
wrappedActionHandler vuex.esm-bundler.js:815
dispatch vuex.esm-bundler.js:488
boundDispatch vuex.esm-bundler.js:373
logout index.vue:29
withModifiers runtime-dom.esm-bundler.js:1147
callWithErrorHandling runtime-core.esm-bundler.js:154
callWithAsyncErrorHandling runtime-core.esm-bundler.js:163
invoker runtime-dom.esm-bundler.js:333
addEventListener runtime-dom.esm-bundler.js:283
patchEvent runtime-dom.esm-bundler.js:301
patchProp runtime-dom.esm-bundler.js:369
mountElement runtime-core.esm-bundler.js:3905
processElement runtime-core.esm-bundler.js:3868
patch runtime-core.esm-bundler.js:3788
mountChildren runtime-core.esm-bundler.js:3975
mountElement runtime-core.esm-bundler.js:3896
processElement runtime-core.esm-bundler.js:3868
patch runtime-core.esm-bundler.js:3788
componentEffect runtime-core.esm-bundler.js:4298
reactiveEffect reactivity.esm-bundler.js:42
effect reactivity.esm-bundler.js:17
setupRenderEffect runtime-core.esm-bundler.js:4263
mountComponent runtime-core.esm-bundler.js:4222
processComponent runtime-core.esm-bundler.js:4182
patch runtime-core.esm-bundler.js:3791
componentEffect runtime-core.esm-bundler.js:4368
reactiveEffect reactivity.esm-bundler.js:42
callWithErrorHandling runtime-core.esm-bundler.js:154
flushJobs runtime-core.esm-bundler.js:384
promise callback*queueFlush runtime-core.esm-bundler.js:286
queueJob runtime-core.esm-bundler.js:280
run reactivity.esm-bundler.js:183
trigger reactivity.esm-bundler.js:189
scheduler reactivity.esm-bundler.js:851
run reactivity.esm-bundler.js:183
trigger reactivity.esm-bundler.js:189
I am using vue-router@next and vuex@next
Please follow https://new-issue.vuejs.org/?repo=vuejs/vue-next#why-repro or use the forum or the Discord chat to ask questions.