Directives not working with SVG

[vandelpavel]

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

[lidlanca]

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 */))
}
}

[edison1105]

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
  

  core/packages/compiler-core/src/transforms/hoistStatic.ts

  Lines 171 to 177 in 4768f26

  	if (
  	codegenNode.isBlock &&
  	node.tag !== 'svg' &&
  	node.tag !== 'foreignObject'
  	) {
  	return ConstantTypes.NOT_CONSTANT
  	}