Unresolved global directive leads to the `Cannot read properties of undefined (reading 'deep')` error

mefcorvi

Jul 22nd 2022

Vue version

3.2.73

Link to minimal reproduction

https://sfc.vuejs.org/#eNo9jUkOwjAMRa8SeU2SfRUhcY9sCjWQqhlku2FR5e4kCHVn/+H9A26lmLojTOAEY9lmwatPSrklVFV1yqIJOW8VF2W74+wZgwuEWDKJjnMxK+fUKcco+7/BHib1U4bWZ8bv4S1SeLKWn4+xvbLJ9LL9MrQnCRENctR3yh9G6mAPA9F8atC+EZ887A==

Steps to reproduce

Add any nonexistent custom directive to any element in the SFC file.

<template>
  <div v-not-resolved>Test</div>
</template>

What is expected?

An error with a correct message about unresolved directive.

What is actually happening?

You can see a warning Failed to resolve directive: not-resolved in the logs but then Cannot read properties of undefined (reading 'deep') error is thrown at this line: https://github.com/vuejs/core/blob/ea6fc845f25f454e7264720001c9ed18414252b9/packages/runtime-core/src/directives.ts#L104

Problem is that SFC compiler generates something like this:

  const _directive_not_resolved = _resolveDirective("not-resolved")

  return _withDirectives((_openBlock(), _createElementBlock("div", null, _hoisted_2)), [
    [_directive_not_resolved]
  ])

resolveDirective tries to resolve directive, can't find it, writes a warning to the logs and returns undefined. Then function withDirectives fails because it is assuming that all directives are correctly resolved.

This issue is also related to https://github.com/vuejs/core/issues/4054 - resolveDirective really returns Directive | undefined and withDirectives expects directives: Array<[Directive, ...]>.

System Info

No response

Any additional comments?

No response

GitHub Track