Version

3.2.27

Reproduction link

jsfiddle.net/rvocfqwn/22/

Steps to reproduce

You must use an svg image and use a custom directive like in the fiddle. You can see that if the directive is on another element it works while on svg's will return an error.

What is expected?

Should works fine and log the element

What is actually happening?

Returns an error

hoisting issue

<template>
  <b>{{msg}}</b>
  <svg  v-x>
    <path d="M2,3H5.5L12"/>
  </svg>
</template>

withDirectives called outside render function, and _directive_x is unscoped

const _hoisted_1 = _withDirectives(/*#__PURE__*/_createElementVNode("svg", null, [
  /*#__PURE__*/_createElementVNode("path", { d: "M2,3H5.5L12" })
], -1 /* HOISTED */), [
  [_directive_x]
])

render function

return (_ctx, _cache) => {
  const _directive_x = _resolveDirective("x")

  return (_openBlock(), _createElementBlock(_Fragment, null, [
    _createElementVNode("b", null, _toDisplayString(msg.value), 1 /* TEXT */),
    _hoisted_1
  ], 64 /* STABLE_FRAGMENT */))
}
}

caused by:

• force block for custom dirs
• svg and foreignObject also force block
• svg + custom dirs also force block, but here we skip the logic https://github.com/vuejs/core/blob/4768f26f591551b222aa9a2cc73791f8bff9f5f7/packages/compiler-core/src/transforms/hoistStatic.ts#L171-L177