CODEWITHSUNDEEP
javascriptvuejs3
Dolphin
Dolphin

Reputation: 38621

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

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.

Upvotes: 14

Views: 17275

Answers (6)

megabreakage
megabreakage

Reputation: 3

I had the same error recently. It comes up when you have a typo on vuejs tags in your html. In my case this was the typo.

<i class="text-danger stock-status" v-esle>Out Of Stock</i>

I had typed v-esle instead of v-else. Once corrected the error disappeared. Check your tags for any typos. You can also use IDE extensions to assist in identifying typos before you build. Such as Vue Language Features

Upvotes: 0

eylay
eylay

Reputation: 2160

The error message is misleading when you have a typo!

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.

Another time that I faced this error was because of a typo again:

<div v-esle class="alert alert-warning">
    ...
</div>

So the conclusion is, before checking for anything else, MAKE SURE YOU DO NOT HAVE A TYPO

Upvotes: 7

Farshid Ghiasimanesh
Farshid Ghiasimanesh

Reputation: 101

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

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

Upvotes: 2

Riki krismawan
Riki krismawan

Reputation: 567

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

Upvotes: 0

snoob dogg
snoob dogg

Reputation: 2865

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.

Upvotes: 0

Jos&#233; Varela
Jos&#233; Varela

Reputation: 131

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

Upvotes: 13

Related Questions