Sanity and Gatsby - Cannot Read Property '_Type' of Undefined SpanSerializer
10 replies
Last updated: Oct 18, 2020
P
Hello, I’m trying to make my first website with Sanity and Gatsby but I’m stuck with the importation of Portable Text blocks. Here is my code :
and I have this error :
My block text is just plain text without any embellishment like bold, etc.
I tried many things but without any success.
Thanks for any advice on this.
import { graphql } from 'gatsby'; import React from 'react'; import Img from 'gatsby-image'; import BlockContent from '@sanity/block-content-to-react'; import { serializers } from '@sanity/block-content-to-react/lib/targets/dom'; export default function HomePage({ data }) { const { home } = data; return ( <> <Img fluid={home.image.asset.fluid} alt={home.title} /> {home.chapo.map( (post) => post._rawChildren && ( <BlockContent blocks={post._rawChildren} serializers={serializers} /> ) )} </> ); } export const query = graphql` query MyQuery { home: sanityPage(slug: { current: { eq: "accueil" } }) { id title slug { current } image { asset { fluid(maxWidth: 1312) { ...GatsbySanityImageFluid } } } chapo { _rawChildren(resolveReferences: { maxDepth: 10 }) } text { _rawChildren(resolveReferences: { maxDepth: 10 }) } goals { id title icon { asset { fixed { ...GatsbySanityImageFixed } } } list } } } `;
TypeError: Cannot read property '_type' of undefined SpanSerializer node_modules/@sanity/block-content-to-hyperscript/lib/serializers.js:39 36 | mark = _props$node.mark, 37 | children = _props$node.children; 38 | var isPlain = typeof mark === 'string'; > 39 | var markType = isPlain ? mark : mark._type; 40 | var serializer = props.serializers.marks[markType]; 41 | 42 | if (!serializer) {
I tried many things but without any success.
Thanks for any advice on this.
Oct 18, 2020, 9:44 AM
K
Hi! Mind sharing the output in your console of
?
{home.chapo.map( (post) => console.log(post) || post._rawChildren && ( <BlockContent blocks={post._rawChildren} serializers={serializers} /> ) )}
Oct 18, 2020, 9:52 AM
K
Yeah, I was wondering about the data structure that comes out of
home.chapo🙂
Oct 18, 2020, 9:58 AM
P
ah ok sorry 😉
Oct 18, 2020, 9:59 AM
P
Is this better ?
Oct 18, 2020, 10:02 AM
K
(it’s the
console.log(home.chapo))
Oct 18, 2020, 10:04 AM
K
Ah, now I get it. you're one level too deep. try querying for
_rawChapoinstead and give that to the blockcontent component, so:
<BlockContent blocks={home._rawChapo} serializers={serializers} />
Oct 18, 2020, 10:06 AM
K
The
childrenare a part of a
_type: 'block'object in the Portable Text array.
Oct 18, 2020, 10:06 AM
P
Ok thanks a lot Knut, I’m gonna try this now
Oct 18, 2020, 10:07 AM
P
It works ! thank you so much
user Y
!!!Oct 18, 2020, 10:19 AM
K
🎉
Oct 18, 2020, 10:19 AM
Sanity.io – build remarkable experiences at scale
Sanity is a customizable solution that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.