Migrating github.gist serializer from block-content-to-react to portabletext/react

The issue you're experiencing is due to a key API change when migrating from @sanity/block-content-to-react to @portabletext/react. In the new library, the prop name changed from node to value.

Here's what you need to fix in your code:

types: {
  /* eslint-disable-next-line react/display-name */
  authorReference: ({ value }) => <span>{value.author.name}</span>, // changed from node to value
  mainImage: Figure,
  'github.gist': ({ value }) => { // changed from node to value
    const { id, file } = value;
    return <Gist id={id} file={file ? file : undefined} />;
  }
}

This is the primary breaking change when migrating from @sanity/block-content-to-react - all custom type components now receive their data through the value prop instead of node.

The destructuring was failing because node was undefined (since the library passes value instead), which is exactly what your error message indicated: "Cannot destructure property 'id' of 'node' as it is undefined."

Additionally, for marks/annotations (like links or custom text decorations), you'll access the data through value as well, while children remains the same for the wrapped content:

marks: {
  link: ({ value, children }) => <a href={value.href}>{children}</a>
}

The migration guide for @portabletext/react shows that this node → value change applies to all custom block types and annotations, making the API more consistent across the library.