Subscribe on changes!

Uncaught (in promise) TypeError: oldBindings[i] is undefined

avatar
Sep 13th 2022

Vue version

v3.2.38

Link to minimal reproduction

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

avatar
Sep 13th 2022

could you provide a minimal reproduction?

avatar
Sep 13th 2022

Same issue here.

avatar
Sep 13th 2022

any fix yet?

avatar
Sep 16th 2022

this error still exists both on this.$router.push and this.$router.replace using Vue 3.2.38.

avatar
Sep 21st 2022

@Dedicatus546 @LinusBorg Added repro links. Also fixed typo in original issue: 3.2.28 -> 3.2.38

avatar
Sep 22nd 2022

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

avatar
Sep 22nd 2022

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

avatar
Sep 22nd 2022

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