Error using @portabletext/react instead of @sanity/block-content-to-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.
Sanity – Build the way you think, not the way your CMS thinks
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.