browser error: withDirectives can only be used inside render functions. #9620
Description
Vue version
3.3.8
Link to minimal reproduction
Steps to reproduce
<template>
<A />
<!-- <clone /> -->
<B />
<!-- <input v-focus value="withDirectives" /> -->
<C />
<!-- <button @click.stop.prevent="() => console.log('withModifiers')">click</button> -->
</template>
<script setup>
import { h, mergeProps, cloneVNode, isVNode, resolveDirective, withDirectives, withModifiers } from 'vue'
const A = h('span',"A");
const one = { class: 'foo', onClick: () => 1}
const two = { class: { bar: true }, onClick: () => 2 }
const merged = mergeProps(one, two)
console.log("mergeProps: ", merged)
const clone = cloneVNode(A, {template: 'A', type: 'clone'});
if (isVNode(A)) {
console.log("cloneVNode: ", clone)
}
// const vFocus = resolveDirective('vFocus');
const vFocus = {
mounted: (el) => el.focus()
}
const B = withDirectives(h('input', {
value: "withDirectives"
}), [[vFocus]])
const C = h('button', {
innerText: "click",
onClick: withModifiers(() => {
console.log("withModifiers")
}, ['stop', 'prevent'])
})
</script>
What is expected?
B component should get focus
What is actually happening?
B component not get focus
System Info
App.vue:26 [Vue warn]: withDirectives can only be used inside render functions. at <App>Any additional comments?
I'm a beginner in vue3. I tried Google and issue to find the answer, but I don't seem to be the same as the problem I encountered.
#3446