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

[idoly]

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.
#3446

[LinusBorg]

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.

[idoly]

Thank you for your answer. I'm just a bit confused about using withDirectives
This is an example given in the official document, but an error was thrown

import { h, withDirectives } from 'vue'

// a custom directive
const pin = {
  mounted() {
    /* ... */
  },
  updated() {
    /* ... */
  }
}

// <div v-pin:top.animate="200"></div>
const vnode = withDirectives(h('div'), [
  [pin, 200, 'top', { animate: true }]
])

After my testing, it should be written like this to take effect

<template>
  <B />
</template>

<script setup>
import { h, withDirectives } from 'vue'
const vFocus = {
  mounted: (el) => el.focus()
}

const B = () => withDirectives(h('input', {
  value: "withDirectives"
}), [[vFocus]])
</script>

[Codehouze]

I have developed a Vue 3 plugin and distributed it using a CDN. However, when I include the plugin in a project via the CDN, the input fields within my component return an empty string, even though the input is visible and interactive in the browser. Additionally, I receive the following warning: withDirectives can only be used inside render functions. could this be the issue. and how can i fix this warning ?

[LinusBorg]

Hard to say for sure without looking at it, but probably you did not exclude the vue package from your build, meaning your plugin ships with its own copy of Vue, which then conflicts with the copy of Vue being used to render the rest of the application (plus it blows up your plugin's bundle size enormously).

[Codehouze]

@LinusBorg Here are what i have done trying to fix this bug:

1. I excluded vue when bundling the plugin.
2. In the consumer website, I ensured that Vue is initialized via a script tag before loading the plugin from the CDN.
3. I made sure to use the same Vue version in the consumer website that was used during the plugin's development to maintain compatibility.

kindly find attached my vite.config.js file

`import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
plugins: [vue()],
build: {
lib: {
entry: './src/index.js',
name: 'NoteWriter',
fileName: (format) => 'noteWriter.' + format + '.js',
formats: ['es', 'umd'] // Output both ESM and UMD formats
},
rollupOptions: {
external: ['vue'],
output: {
globals: {
vue: 'Vue',
},
},
},
},
});`