Uncaught (in promise) TypeError: oldBindings[i] is undefined
Vue version
v3.2.38
Link to minimal reproduction
- https://github.com/sgpinkus/vue3-old-bindings-bug-repro
- https://stackblitz.com/github/sgpinkus/vue3-old-bindings-bug-repro?file=README.md
Steps to reproduce
Not sure. Happened as a result of navigating via vue-router. This is the stack trace:
Uncaught (in promise) TypeError: oldBindings[i] is undefined
invokeDirectiveHook runtime-core.esm-bundler.js:2779
patchElement runtime-core.esm-bundler.js:5349
flushPostFlushCbs runtime-core.esm-bundler.js:339
flushJobs runtime-core.esm-bundler.js:393
promise callback*queueFlush runtime-core.esm-bundler.js:280
queueJob runtime-core.esm-bundler.js:274
scheduler runtime-core.esm-bundler.js:1803
triggerEffect reactivity.esm-bundler.js:394
triggerEffects reactivity.esm-bundler.js:384
triggerRefValue reactivity.esm-bundler.js:1000
effect reactivity.esm-bundler.js:1134
triggerEffect reactivity.esm-bundler.js:394
triggerEffects reactivity.esm-bundler.js:379
triggerRefValue reactivity.esm-bundler.js:1000
set value reactivity.esm-bundler.js:1045
poll VImg.tsx:166
pollForSize VImg.tsx:176
init VImg.tsx:136
promise callback*nextTick runtime-core.esm-bundler.js:242
init VImg.tsx:126
observer index.ts:54
mounted index.ts:33
callWithErrorHandling runtime-core.esm-bundler.js:155
callWithAsyncErrorHandling runtime-core.esm-bundler.js:164
invokeDirectiveHook runtime-core.esm-bundler.js:2786
mountElement runtime-core.esm-bundler.js:5222
flushPostFlushCbs runtime-core.esm-bundler.js:339
flushJobs runtime-core.esm-bundler.js:393
promise callback*queueFlush runtime-core.esm-bundler.js:280
queuePostFlushCb runtime-core.esm-bundler.js:302
queueEffectWithSuspense runtime-core.esm-bundler.js:1574
scheduler runtime-core.esm-bundler.js:1796
triggerEffect reactivity.esm-bundler.js:394
triggerEffects reactivity.esm-bundler.js:384
triggerRefValue reactivity.esm-bundler.js:1000
effect reactivity.esm-bundler.js:1134
triggerEffect reactivity.esm-bundler.js:394
triggerEffects reactivity.esm-bundler.js:379
triggerRefValue reactivity.esm-bundler.js:1000
effect reactivity.esm-bundler.js:1134
triggerEffect reactivity.esm-bundler.js:394
triggerEffects reactivity.esm-bundler.js:379
triggerRefValue reactivity.esm-bundler.js:1000
set value reactivity.esm-bundler.js:1045
finalizeNavigation vue-router.mjs:3324
pushWithRedirect vue-router.mjs:3197
promise callback*pushWithRedirect vue-router.mjs:3164
push vue-router.mjs:3089
navigate vue-router.mjs:2182
callWithErrorHandling runtime-core.esm-bundler.js:155
callWithAsyncErrorHandling runtime-core.esm-bundler.js:164
runtime-core.esm-bundler.js:2779:12
invokeDirectiveHook runtime-core.esm-bundler.js:2779
patchElement runtime-core.esm-bundler.js:5349
flushPostFlushCbs runtime-core.esm-bundler.js:339
flushJobs runtime-core.esm-bundler.js:393
(Async: promise callback)
queueFlush runtime-core.esm-bundler.js:280
queueJob runtime-core.esm-bundler.js:274
scheduler runtime-core.esm-bundler.js:1803
triggerEffect reactivity.esm-bundler.js:394
triggerEffects reactivity.esm-bundler.js:384
triggerRefValue reactivity.esm-bundler.js:1000
effect reactivity.esm-bundler.js:1134
triggerEffect reactivity.esm-bundler.js:394
triggerEffects reactivity.esm-bundler.js:379
triggerRefValue reactivity.esm-bundler.js:1000
set value reactivity.esm-bundler.js:1045
poll VImg.tsx:166
pollForSize VImg.tsx:176
init VImg.tsx:136
(Async: promise callback)
nextTick runtime-core.esm-bundler.js:242
init VImg.tsx:126
observer index.ts:54
(Async: IntersectionCallback)
mounted index.ts:33
callWithErrorHandling runtime-core.esm-bundler.js:155
callWithAsyncErrorHandling runtime-core.esm-bundler.js:164
invokeDirectiveHook runtime-core.esm-bundler.js:2786
mountElement runtime-core.esm-bundler.js:5222
flushPostFlushCbs runtime-core.esm-bundler.js:339
flushJobs runtime-core.esm-bundler.js:393
(Async: promise callback)
queueFlush runtime-core.esm-bundler.js:280
queuePostFlushCb runtime-core.esm-bundler.js:302
queueEffectWithSuspense runtime-core.esm-bundler.js:1574
scheduler runtime-core.esm-bundler.js:1796
triggerEffect reactivity.esm-bundler.js:394
triggerEffects reactivity.esm-bundler.js:384
triggerRefValue reactivity.esm-bundler.js:1000
effect reactivity.esm-bundler.js:1134
triggerEffect reactivity.esm-bundler.js:394
triggerEffects reactivity.esm-bundler.js:379
triggerRefValue reactivity.esm-bundler.js:1000
effect reactivity.esm-bundler.js:1134
triggerEffect reactivity.esm-bundler.js:394
triggerEffects reactivity.esm-bundler.js:379
triggerRefValue reactivity.esm-bundler.js:1000
set value reactivity.esm-bundler.js:1045
finalizeNavigation vue-router.mjs:3324
pushWithRedirect vue-router.mjs:3197
(Async: promise callback)
pushWithRedirect vue-router.mjs:3164
push vue-router.mjs:3089
navigate vue-router.mjs:2182
callWithErrorHandling runtime-core.esm-bundler.js:155
callWithAsyncErrorHandling runtime-core.esm-bundler.js:164
What is expected?
No TypeError
What is actually happening?
You tell me.
System Info
$ lsb_release -a No LSB modules are available. Distributor ID: Debian Description: Debian GNU/Linux 10 (buster) Release: 10 Codename: buster $ firefox --version Mozilla Firefox 91.13.0esr
Any additional comments?
Does not happen in v3.2.37
Your reproduction is not minimal, please read and follow https://new-issue.vuejs.org/?repo=vuejs/vue-next#why-repro when reporting a bug. Most bugs should be reproducible with the SFC Playground.
There seems to be other duplicates as pointed out by @AlvaroBrasilia in https://github.com/vuejs/core/pull/6659
@posva yeah wasn't the best, was a work in progress. Wasn't sure where to start so started from prod app and cut off all cruft I could think of in time I had. Was planning to investigate further then revise. It does however reliably trigger the error.
Your correct most of the issues listed by @AlvaroBrasilia seem to be the same thing. I didn't notice because they don't mention oldBindings
in title. I still can't see root cause of this in v3.2.38 change but @AlvaroBrasilia PR would definitely fix. I think you should just merge @AlvaroBrasilia PR for now since it keep on coming up.
@posva Made repro much simpler. Hope that helps. Still using Vuetify because the source of the error here and in most of the other issues is in some (weird, but still valid Vue) stuff VImg is doing onBeforeMount -- https://github.com/vuetifyjs/vuetify/blob/faf66716e6b41cbecb89de562bcc4d73b3009c8c/packages/vuetify/src/components/VImg/VImg.tsx#L165. To go further need to repro that.