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