Uncaught TypeError: Cannot read properties of undefined (reading 'deep') when upgrade to vue 3.x

Question

After upgrade the vue to 3.x, the console shows error like this:

Uncaught TypeError: Cannot read properties of undefined (reading 'deep')
    at withDirectives (commons1.js:10679:17)
    at Proxy.render (eval at compileToFunction (commons1.js:40198:21), <anonymous>:36:7)
    at renderComponentRoot (commons1.js:7874:44)
    at ReactiveEffect.componentUpdateFn [as fn] (commons1.js:11968:57)
    at ReactiveEffect.run (commons1.js:5819:29)
    at setupRenderEffect (commons1.js:12094:9)
    at mountComponent (commons1.js:11877:9)
    at processComponent (commons1.js:11835:17)
    at patch (commons1.js:11436:21)
    at render (commons1.js:12579:13)

I have no idea what was happen, think it may be a compatible problem. I did not know how to found where is going wrong. I could not know the line where is going wrong from the output js(from this error I could not know where is going wrong with the source code), this is the code looks like:

/**
 * Adds directives to a VNode.
 */
function withDirectives(vnode, directives) {
    const internalInstance = currentRenderingInstance;
    if (internalInstance === null) {
        ( true) && warn(`withDirectives can only be used inside render functions.`);
        return vnode;
    }
    const instance = internalInstance.proxy;
    const bindings = vnode.dirs || (vnode.dirs = []);
    for (let i = 0; i < directives.length; i++) {
        let [dir, value, arg, modifiers = _vue_shared__WEBPACK_IMPORTED_MODULE_1__.EMPTY_OBJ] = directives[i];
        if ((0,_vue_shared__WEBPACK_IMPORTED_MODULE_1__.isFunction)(dir)) {
            dir = {
                mounted: dir,
                updated: dir
            };
        }
        // here throw the error message
        if (dir.deep) {
            traverse(value);
        }
        bindings.push({
            dir,
            instance,
            value,
            oldValue: void 0,
            arg,
            modifiers
        });
    }
    return vnode;
}

when running into the dir.deep line, throw this error, what should I do to fix this problem? I tried to search from Google seems no one facing the same problem.

Answer 1

for me it was a typo in v-model

<input type="text" class="form-control" v-moel="newUser.name">

after I fixed the typo v-moel to v-model , it got fixed

Answer 2

I had this issue today and I found out the problem was because I was trying to use an unregistered directive.

If you put a breakpoint right the invocation before where the error happens, in your case at Proxy.render (eval at compileToFunction (commons1.js:40198:21), <anonymous>:36:7) you will find something like const _directive_focus = _resolveDirective("focus"); and then you know what directive you are missing

Answer 3

For me, it was because after a migration from Vue2 to Vue3, a directive called v-focus was used on a <input/> element. I don't know if this is a breaking change from Vue3 or if I missed something, but someone explained here how you can reimplement it.

Answer 4

for me it was a typo in v-on

<CartItem 
v-for="item in cartItems" :key="item.id" :item="item" 
v-von:remove-item="removeFromCart($event)">
</CartItem>

after i fixed the typo v-von to v-on, it got fixed

Answer 5

I had the same error on Vue3. You have to add directive to app before mount.

creatApp(X).directive('Y',{...}).mount('#Z')