CustomComponent Serializer Example?

[AustinCarr]

Hi, I'm having trouble using a custom component as a serializer. I've tried looking for examples, but am also struggling to find those.

I'm trying to create a serializer for a code block, and my component looks like this:

<script>
export default {
  name: 'Code',
  functional: true,
  render(h, { props }) {
    return h(
      'pre',
      {
        props,
      },
      props.code
    )
  },
}
</script>

and I'm importing it into my view:

<template>
  <div>
      <SanityContent
        :blocks="fetchedBlocks" // Assignment removed for clarity
        :serializers="serializers"
      />
  </div>
</template>
<script>
import Code from '~/components/Code.vue'

export default {
  name: 'Page',
  data() {
    return {
      serializers: {
        types: {
          code: Code,
        },
      },
    }
  },
}
</script>

I'm using Nuxt.js with the SanityContent component, and am able to load these changes client-side when it hot reloads, but after refreshing the page I get a Maximum call stack size exceeded in regards to @nuxt/devalue getting stuck in a loop.

Is there something I'm missing in regards to creating a component serializer or importing it? Thanks!

[rdunk]

Hi @AustinCarr, would you be able to share the versions of Nuxt, Vue and sanity-blocks-vue-component that you are using so I can try and reproduce?

[AustinCarr]

Hi rdunk, thanks for taking the time to respond. I'm using server-side rendering with:

"nuxt": "^2.15.3"
"@nuxtjs/sanity": "^0.7.1",

I realize @nuxtjs/sanity uses a re-implementation of sanity-blocks-vue-component, which I don't think you have anything to do with, so I don't expect you to do a deep dive to reproduce.

It would just be helpful to know if the code I'm using for the serializer looks OK, or if there are other examples for me to look at.

I think the issue might be importing the component on the server-side, since it works when navigating to the page or hot reloading (and rendering client-side) versus refreshing the page and having the server render.

[rdunk]

AFAIK that package doesn't use this library as a dependency, it just aims for equivalent functionality, so not sure I can be of much help here.

[AustinCarr]

Yeah, that's what I figured. Thank you so much for your time and thank you for creating this component, I really appreciate it!

For anybody else who may run into this issue in the future: I was able to fix this Maximum call stack size exceeded error by using Nuxt's asyncData hook instead of fetch to fetch the data from Sanity.