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

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'

  data: StructuredTextGraphQlResponse

function renderBlock(context: RenderBlockContext): AdapterReturn {
  const MyBaseImg = resolveComponent('MyBaseImg')
  const record = context.record
  switch (record.__typename) {
    case 'ImageRecord':
      return h(
        { 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' })],
      return null

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

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

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…