Issue with using the plugin `block-content-to-react` in Gatsby causing an error with formatted text.

Hey everyone. Has anyone successfully used the plugin

block-content-to-react

? I keep getting the error

Cannot read property 'find' of undefined

when it’s used with any formatted text (bold/italics/underline). If the content of the block is plain it works fine.

This is the error I’m getting in Gatsby 🤕

Hi User. I think you’ll also want to use the gatsby-source-sanity plugin.

Hey User. I’m using that plugin too. Everything else is working great (querying and using strings/images etc.)

I came across this same error with someone using Nuxt, and it was a cache problem. Would you mind trying

gatsby clean

to clear the cache? I’m doubtful but it shouldn’t hurt to try.

Unfortunately that didn’t help with the error 😞

Thanks for trying. Your portable text component looks something like this?

https://github.com/SimeonGriggs/sanity-page-builder-for-gatsby/blob/master/web/src/components/portableText.js

Yes, and then I’m using the component like this:

<PortableText blocks={props.description} />

. The problem seems to be coming from how the plugin processes the ‘marks’ field. As soon as I remove this from my GraphQL query I no longer get the error (but then the text has no formatting applied)

What if you use

props.blocks

instead of

props.description

?

I get this error unfortunately

My GraphQL query looks like this:
And I’m passing the description into the PortableText component’s

blocks

field

With Gatsby you probably want to use the

_rawDescription

field in this case, so it includes all the available fields (

markDefs

is missing above because of GraphQL schema inference issues):

https://github.com/sanity-io/gatsby-source-sanity#raw-fields

This worked! Thank you so much! And User, thank you for all of your help too, I really appreciate your time 🙌

Happy to hear it, User!