When using serializer.types, resolveComponent does not work and instead components have to be manually imported

[toddpadwick]

Version

module: 1.4.1
nuxt: 3-rc.11

When using the serializer, based on the docs, it seems the following should be possible:

<template>
  <SanityContent :blocks="content" :serializers="serializers"/>
</template>

<script setup>
import { resolveComponent } from 'vue'
  const props = defineProps({
    content:{required:true,type:Array}
  })

  const serializers = {
    types: {
      youtube:resolveComponent('YoutubeVideo'),
      gallery:resolveComponent('Gallery')
    },
  }
</script>

However, it returns the following error:

Failed to resolve component: Gallery
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 

The only way I have managed to get this to work, is by importing the component manually, like so:

<template>
  <SanityContent :blocks="content" :serializers="serializers"/>
</template>


<script setup>
  import YoutubeVideo from '~/components/YoutubeVideo.vue'
  import Gallery from '~/components/Gallery.vue'


  const props = defineProps({
    content:{required:true,type:Array}
  })

  const serializers = {
    types: {
      youtube:YoutubeVideo,
      gallery:Gallery
    },
    marks: {
      // You can also just pass a string for a custom serializer if it's an HTML element
      internalLink: 'a'
    }
  }
</script>

[danielroe]

Would you try not importing resolveComponent but relying on the auto-import? If that doesn't work, would you provide a minimal repro?

[toddpadwick]

Do you mean without the line import { resolveComponent } from 'vue'?

[danielroe]

yes.

[toddpadwick]

Unfortunately, that didn't work either :(

[pascalwengerter]

@toddpadwick I could make it work for component-name strings by making the desired components global in the nuxt config:

  components: {
    dirs: [
      // the base components directory didn't seem to work
      // "~/components",
      "~/components/00_base",
      "~/components/01_atoms",
      "~/components/02_molecules",
      "~/components/03_organisms",
      "~/components/04_layout",
      {
        path: "~/components/04_sections",
        global: true,
      },
    ],
  },

@danielroe what I can't figure out is dynamic imports from variable names:

const serializers = {
  types: {
    // works with global components when their names are available as strings
    oneComponent: resolveComponent("FurtherQuestions"),
    // doesn't work since component name gets resolved at runtime (?)
    twoComponent: (props) => resolveComponent(props.title)
  },
};

[pascalwengerter]

Found a working solution for the second problem:

const serializers = {
  types: {
      // the import part is the `h()` render function
      myType: (props) => h(resolveComponent(props.title), { props }),
    }
  },
};

[danielroe]

If Nuxt can't know at build time which components you need, then you should mark them as global so they will all be built and available at runtime.

[pascalwengerter]

@danielroe would you mind keeping this issue open? At least @toddpadwick and me tried using the docs in their current form and ended up having problems, I suppose there's some potential in being more clear on the different ways/use cases :)

[danielroe]

Of course! Good point.