Custom type components won't render in static nuxt build

Version

module: 0.9.1 nuxt: ^2.15.3

Nuxt configuration

mode:

• universal
• spa

Nuxt configuration

Static generation

Reproduction

Custom components for custom types will work in dev mode, but will not generate for static.

What is expected?

Custom block types should be created in static site generation, just like dev mode

What is actually happening?

Errors from any kind of asyncData or fetch happening on server to build site throwing up:

WARN  Cannot stringify a function String
WARN  Cannot stringify a function Object
WARN  Cannot stringify a function render
WARN  Cannot stringify a function hook
WARN  Cannot stringify a function VueComponent

Steps to reproduce

• Add @nuxtjs/sanity to a fresh Nuxt boilerplate
• Fetch sanity content that contains a custom type
• Confirm it works in dev mode
• Run nuxt generate && nuxt start
• You should see similar above errors and the custom components aren’t rendered in pages

Additional information

Checklist

• I have tested with the latest Nuxt version and the issue still occurs
• I have tested with the latest module version and the issue still occurs
• I have searched the issue tracker and this issue hasn’t been reported yet

[monowales]

Hi @danielroe, thanks for getting back on this. I found I had two problems, when trying the nuxt module it was fetch vs asyncData, and when trying the @rdunk sanity-blocks-vue-component I was mistakenly leaving ... mode: client } for the plugin in nuxt.config.js, which meant SSR didn’t have access to the component on generation. Thanks again for your help.

[danielroe]

Just looking at your comment again, the key difference is that fetch stringifies the entire component state, whereas asyncData just stringifies what asyncData returns. I suspect you have set a data property to a component. Likely you can fix by setting in created() instead (with an added performance benefit as it won’t be reactive) or via a computed property. For example:

import MyComponent from './MyComponent.vue'
const MyDynamicComponent = () => import('./MyDynamicComponent.vue')

export default {
  created() {
    this.serializers = {
      types: {
        otherThing: MyComponent,
        dynamicThing: MyDynamicComponent,
      }
    }
  }
}