Nuxt3 / vue-datocms typescript error while implementing a rendererBlock function

🆘 Support
1

I use the component out of the vue-datocms package and want to add a renderer for blocks, using typescript in Nuxt3.

A last error is not removable:

Module ‘vue-datocms’ declares ‘AdapterReturn’ locally, but it is not exported.

Can someone help me to fix this in the following single file component, please?

<script setup lang="ts">
import { StructuredText } from 'vue-datocms'
import type { AdapterReturn, RenderBlockContext, StructuredTextGraphQlResponse } from 'vue-datocms'

defineProps<{
  data: StructuredTextGraphQlResponse
}>()

function renderBlock(context: RenderBlockContext): AdapterReturn {
  const MyBaseImg = resolveComponent('MyBaseImg')
  const record = context.record
  switch (record.__typename) {
    case 'ImageRecord':
      return h(
        'div',
        { class: 'shadow-lg lg:shadow-xl rounded-md md:rounded-lg' },
        [h(MyBaseImg, { data: record.image, class: 'w-full h-full rounded-md md:rounded-lg' })],
      )
    default:
      return null
  }
}
</script>

<template>
  <StructuredText :data="data" :render-block="renderBlock" />
</template>
2

Hi @hillmann, welcome to the forums!

AdapterReturn is an internal type we don’t export:

type AdapterReturn = VNode | string | null;

But you can get the same thing by doing:

import type { RenderBlockContext, StructuredTextGraphQlResponse } from 'vue-datocms' // no AdapterReturn

// ...

function renderBlock(context: RenderBlockContext): VNode | string | null {

/...

(VNode is a Vue built-in type)

That should make the error go away

3

Ok, this is working, thanks!

Maybe you rethink to export this type, because the type is part of an external callback function interface you define. Redefining the return type is a bit difficult in case of future changes on your side…

Regards,
Michael