Unhandled Runtime Error

Developing with Prismic
27

I think the issue here for everyone is not that the mock data is being generated incorrectly, the issue, in my opinion, is that the recommended code snippet for Key Text recommends the PrismicText component and this causes an error.

Key text should just be {slice.field}. But in the “Widget” Slice Machine tells you to use <PrismicText field={slice.field} /> , but <PrismicText /> doesn't want just a string.

So the correct way to use a ket text is...

const HeroHeader = ({ slice }) => {
  return <p>{slice.primary.text}</p>
}

This has been updated in the latest versions of Slice Machine, add should appear in the code snippets like so:

<span >{ slice.primary.text }</span>
31

For those running into this issue much further down the line -- make sure to distinguish where you're using {slice.primary.field[0].text} vs {slice.primary.field}.

If you're not consistent about how you access exact values - and where you render them - you can wind up unintentionally trying to unpack content too early, or too deep.

I ran into this issue while unpacking the literal text and then accidentally rendering the literal as a field on RichText, when I meant to utilize the JSON structure provided by RichText, THEN render. Small distinction, but hopefully it saves some headaches for others.