Skip to content
👀 See Sanity in action: Watch product demo now →
Get more help on our Slack

Sanity and Gatsby - Cannot Read Property '_Type' of Undefined SpanSerializer

10 replies
Last updated: Oct 18, 2020
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 :
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
      }
    }
  }
`;
and I have this error :

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) {
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.
Oct 18, 2020, 9:44 AM
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
Yeah, I was wondering about the data structure that comes out of 
home.chapo
  🙂
Oct 18, 2020, 9:58 AM
ah ok sorry 😉
Oct 18, 2020, 9:59 AM
Is this better ?
Oct 18, 2020, 10:02 AM
(it’s the 
console.log(home.chapo)
)
Oct 18, 2020, 10:04 AM
Ah, now I get it. you're one level too deep. try querying for 
_rawChapo
instead and give that to the blockcontent component, so:
<BlockContent blocks={home._rawChapo} serializers={serializers} />

Oct 18, 2020, 10:06 AM
The 
children
 are a part of a 
_type: 'block'
 object in the Portable Text array.
Oct 18, 2020, 10:06 AM
Ok thanks a lot Knut, I’m gonna try this now
Oct 18, 2020, 10:07 AM
It works ! thank you so much
user Y
!!!
Oct 18, 2020, 10:19 AM
🎉
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.

Get StartedJoin our Slack

Categorized in