Vue version

3.2.38

Link to minimal reproduction

https://codepen.io/zehir-the-selector/pen/XWqrpKb

Steps to reproduce

Create a v-img item and get an error

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'value')
    at invokeDirectiveHook (vue.global.js:4323:49)
    at Array.<anonymous> (vue.global.js:6833:27)
    at flushPostFlushCbs (vue.global.js:1916:49)
    at flushJobs (vue.global.js:1969:11)

What is expected?

To not have a error in the console

What is actually happening?

I got one

System Info

No response

Any additional comments?

Was working in 3.2.37

Kael from discord think it's related to this commit : https://github.com/vuejs/core/commit/78c199d6dbe8931520b75d8bfe0d49366a06922a

Related messages on the vuetify discord : https://discord.com/channels/340160225338195969/954061264865349652/1014488520859070576

I saw this through the following nuxt issue: https://github.com/nuxt/framework/discussions/7296 I had some comments there, but I think there's a core issue in

function invokeDirectiveHook(vnode, prevVNode, instance, name) It assumes vnode and prevVNode have the same number of "dirs". I was able to catch a case where this wasn't true.

This check:

        if (oldBindings) {
            binding.oldValue = oldBindings[i].value;
        }

should probably be:

        if (oldBindings[i]) {
            binding.oldValue = oldBindings[i].value;
        }

Is is possible that a directive is being applied while another is being processed?

I saw this through the following nuxt issue: nuxt/framework#7296 I had some comments there, but I think there's a core issue in

function invokeDirectiveHook(vnode, prevVNode, instance, name) It assumes vnode and prevVNode have the same number of "dirs". I was able to catch a case where this wasn't true.

This check:

        if (oldBindings) {
            binding.oldValue = oldBindings[i].value;
        }

should probably be:

        if (oldBindings[i]) {
            binding.oldValue = oldBindings[i].value;
        }

Ran into this as well, and agree. Probably shouldn't be using unsafe property accessors here, either.

This should be a quick (high prio) fix. My whole app immediately crashes on this with 3.2.38.

I tried my suggestion above locally, but it wasn't a complete solution. I still saw errors unless I protected against the .value property access, but even then, I didn't get the expected behavior of the app. Not sure what the right approach is when the two arrays have different sizes.

Same problem here. Does anyone have any solution?

Same problem here. Does anyone have any solution?

Our project's only solution so far has been to pin the version to 3.2.37 :(

Can anyone confirm that this is merely a manifestation of #6659 ? If so, then that's p4 with a pending fix which would be great.

This bug is literally show-stopping, site-breaking for us. Happy to help or provide debug dumps or whatever, but I don't know enough about Vue internals to really tackle this without guidance.

If you're using Vuetify, update to 3.0.0-beta.11

If you aren't then idk, in our case it was caused by reusing vnodes (calling h() in a computed)

Yes @KaelWD I was using Vuetify, I updated vue to 3.2.39 and I don't have issues with Vuetify 3.0.0-beta.11 but I think I should keep this issue open in case not everybody is using Vuetify too.

Can't reproduce the issue with latest Vuetify anymore - is there anyone who's running into this but not using Vuetify?

https://github.com/vuejs/core/pull/4443#issuecomment-1259205410