Subscribe on changes!

browser error: withDirectives can only be used inside render functions.

avatar
Nov 17th 2023

Vue version

3.3.8

Link to minimal reproduction

https://play.vuejs.org/#__DEV__eNp9VF1vmzAU/St3fjFIhGjrW0ai0ayTNmldtVV7KX2g4CRuwbZsQztF+e+7tiEJ3dQHJLhf557jY/YkVyrtO0YWJLOsVU1p2aoQAFkO8/DybjaDrGqkYBiB2QyjPn45KeBCdRb62UZWnYG+bDq2LMgzt7vPXLPK8p6ZgkwnrCcTHjprpYBPVcOrp9RYqVKlWc+ExUFRDMsVVFIY2bC0kduIutnfZc03nGlD44KsfGc2D4MGoGx+RiszlebKgmG2U/jNWyW1hT3sEmiZ3rIbLZVJwLP9fS1rlgA3w4tmiN2zI50EpuzC93EjOMBGyxYoqksdYbe8hRyWsIuoUaWgSUHygsQfT1kn8hL3qZrSmAXQjZQ0wejaMVtAUOH9YSy3z/K8fA8PpV6A1R2Dw1nb0PcBjo2ebI29J9YRYiduYhyKRp0LcqpZQEEGpWosG6cFcyzPZIvyBPaj8MgjRxb2j3KvvogeHGu+gWiQN8rjGPbODFPs08iA7b8RGpkUYj731Wi7L951y3/OKKIhRR3cq1qP1spOWFajtKzxIrEm9RaORpDQdYkN0+OO8BS96ZGaH+U977Z8bXocFCdwdxeQ7++9cuPgdfBD8Ow4igvB9C17sW6cdzVyd4njkU6sFoXz9a2vBZwUotlcDXrjjroLhnh0uGPUrXXAJ5uHS7IiCbEGh234Nn00UuAvwiPgRrJVvGH6h7IcwQqC1gvYBSmbRj5/8zHnQ7+179mx6uk/8Ufz4mIFucGzY7pnA1OXsyUazYb01a9r1OMs2cq6a7D6jeRP54bO7RjKLjtR49pndX7br/4vwMX21ly9WCbMSMotGvQKvPEmr9+gflr3Ir3wfagoOfwFO1zJSw==

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. https://github.com/vuejs/core/issues/3446

avatar
Nov 17th 2023

You are using withDirectives() in the script block, which is not allowed. That's what the error is telling you.

I can't really understand what it is you are trying to do, but it is not a bug. You seem to rather want to ask for help, so I' ll move this to the discussions section.