Rendering a component with slot leads to issues

[djmtype]

Using Nuxt with Directus. I'm trying to render Tiptap's headings using a custom Heading.vue component. However, I'm running into this warning which I can't figure out the reason for:

Non-function value encountered for default slot. Prefer function slots for better performance.

What's needed to fix this?

I've added this to the array of componentSerializers:

const componentSerializers: VueComponentSerializers = [
  { 
    name: 'heading', 
    type: 'node', 
    render: (attrs) => 
    [Heading, {...attrs}] 
  },
 ]

// Heading.vue
<template>
  <component :is="`h${level}`" :style="headingStyle" class="my-component">
    <slot />
  </component>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps<{
  level: number;
  textAlign?: string;
}>();

const headingStyle = computed(() => {
  return props.textAlign ? { textAlign: props.textAlign } : {};
});
</script>

[djmtype]

BTW, this is also the case when using the Textfield.vue component that's part of the example.

[formfcw]

This has to do with the tiptap-render-view package and the way the JSON structure is passed to the renderView function.

[formfcw]

https://stackoverflow.com/questions/69875273/non-function-value-encountered-for-default-slot-in-vue-3-composition-api-comp

[Krislunde]

The answer is a bit confusing, is this fixable? What would the implemented fix look like in the code @djmtype provided?

[formfcw]

Thanks for your comment. As described above, it is not fixable here, but in the tiptap-render-view package. Feel free to contribute there.