Skip to content
👀 Our most exciting product launch yet 🚀 Join us May 8th for Sanity Connect
Get help on Slack

Troubleshooting Portable Text block importation in Gatsby with Sanity

13 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
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
Hi knut, these are the errors in my console :
Oct 18, 2020, 9:58 AM
serializers.js:39 Uncaught TypeError: Cannot read property '_type' of undefined
    at SpanSerializer (serializers.js:39)
    at renderWithHooks (react-dom.development.js:14804)
    at mountIndeterminateComponent (react-dom.development.js:17483)
    at beginWork (react-dom.development.js:18597)
    at HTMLUnknownElement.callCallback (react-dom.development.js:189)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:238)
    at invokeGuardedCallback (react-dom.development.js:293)
    at beginWork$1 (react-dom.development.js:23204)
    at performUnitOfWork (react-dom.development.js:22155)
    at workLoopSync (react-dom.development.js:22131)
    at performSyncWorkOnRoot (react-dom.development.js:21757)
    at scheduleUpdateOnFiber (react-dom.development.js:21189)
    at updateContainer (react-dom.development.js:24374)
    at react-dom.development.js:24759
    at unbatchedUpdates (react-dom.development.js:21904)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24758)
    at render (react-dom.development.js:24841)
    at app.js:115
SpanSerializer @ serializers.js:39
renderWithHooks @ react-dom.development.js:14804
mountIndeterminateComponent @ react-dom.development.js:17483
beginWork @ react-dom.development.js:18597
callCallback @ react-dom.development.js:189
invokeGuardedCallbackDev @ react-dom.development.js:238
invokeGuardedCallback @ react-dom.development.js:293
beginWork$1 @ react-dom.development.js:23204
performUnitOfWork @ react-dom.development.js:22155
workLoopSync @ react-dom.development.js:22131
performSyncWorkOnRoot @ react-dom.development.js:21757
scheduleUpdateOnFiber @ react-dom.development.js:21189
updateContainer @ react-dom.development.js:24374
(anonymous) @ react-dom.development.js:24759
unbatchedUpdates @ react-dom.development.js:21904
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24758
render @ react-dom.development.js:24841
(anonymous) @ app.js:115
setTimeout (async)
(anonymous) @ ready.js:37
(anonymous) @ app.js:114
Promise.then (async)
(anonymous) @ app.js:107
Promise.then (async)
(anonymous) @ app.js:24
./.cache/app.js @ app.js:17
__webpack_require__ @ bootstrap:789
fn @ bootstrap:100
0 @ Typography.js:3
__webpack_require__ @ bootstrap:789
(anonymous) @ bootstrap:856
(anonymous) @ bootstrap:856
index.js:2177 The above error occurred in the <SpanSerializer> component:
    in SpanSerializer (created by SanityBlockContent)
    in SanityBlockContent (at pages/index.js:17)
    in HomePage (created by HotExportedHomePage)
    in AppContainer (created by HotExportedHomePage)
    in HotExportedHomePage (created by PageRenderer)
    in div (at Layout.js:14)
    in div (at Layout.js:10)
    in Layout (at gatsby-browser.js:5)
    in PageRenderer (at query-result-store.js:86)
    in PageQueryStore (at root.js:56)
    in RouteHandler (at root.js:78)
    in div (created by FocusHandlerImpl)
    in FocusHandlerImpl (created by Context.Consumer)
    in FocusHandler (created by RouterImpl)
    in RouterImpl (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (at root.js:73)
    in ScrollHandler (at root.js:69)
    in RouteUpdates (at root.js:68)
    in EnsureResources (at root.js:66)
    in LocationHandler (at root.js:124)
    in LocationProvider (created by Context.Consumer)
    in Location (at root.js:123)
    in Root (at root.js:132)
    in StaticQueryStore (at root.js:138)
    in _default (at app.js:115)

React will try to recreate this component tree from scratch using the error boundary you provided, AppContainer.
__stack_frame_overlay_proxy_console__ @ index.js:2177
overrideMethod @ react_devtools_backend.js:2273
logCapturedError @ react-dom.development.js:19528
logError @ react-dom.development.js:19565
callback @ react-dom.development.js:20745
callCallback @ react-dom.development.js:12491
commitUpdateQueue @ react-dom.development.js:12512
commitLifeCycles @ react-dom.development.js:19859
commitLayoutEffects @ react-dom.development.js:22804
callCallback @ react-dom.development.js:189
invokeGuardedCallbackDev @ react-dom.development.js:238
invokeGuardedCallback @ react-dom.development.js:293
commitRootImpl @ react-dom.development.js:22542
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11040
commitRoot @ react-dom.development.js:22382
finishSyncRender @ react-dom.development.js:21808
performSyncWorkOnRoot @ react-dom.development.js:21794
scheduleUpdateOnFiber @ react-dom.development.js:21189
updateContainer @ react-dom.development.js:24374
(anonymous) @ react-dom.development.js:24759
unbatchedUpdates @ react-dom.development.js:21904
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24758
render @ react-dom.development.js:24841
(anonymous) @ app.js:115
setTimeout (async)
(anonymous) @ ready.js:37
(anonymous) @ app.js:114
Promise.then (async)
(anonymous) @ app.js:107
Promise.then (async)
(anonymous) @ app.js:24
./.cache/app.js @ app.js:17
__webpack_require__ @ bootstrap:789
fn @ bootstrap:100
0 @ Typography.js:3
__webpack_require__ @ bootstrap:789
(anonymous) @ bootstrap:856
(anonymous) @ bootstrap:856
index.js:2177 TypeError: Cannot read property '_type' of undefined
    at SpanSerializer (serializers.js:39)
    at renderWithHooks (react-dom.development.js:14804)
    at mountIndeterminateComponent (react-dom.development.js:17483)
    at beginWork (react-dom.development.js:18597)
    at HTMLUnknownElement.callCallback (react-dom.development.js:189)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:238)
    at invokeGuardedCallback (react-dom.development.js:293)
    at beginWork$1 (react-dom.development.js:23204)
    at performUnitOfWork (react-dom.development.js:22155)
    at workLoopSync (react-dom.development.js:22131)
    at performSyncWorkOnRoot (react-dom.development.js:21757)
    at scheduleUpdateOnFiber (react-dom.development.js:21189)
    at updateContainer (react-dom.development.js:24374)
    at react-dom.development.js:24759
    at unbatchedUpdates (react-dom.development.js:21904)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24758)
    at render (react-dom.development.js:24841)
    at app.js:115 "
    at AppContainer (eval at ES6ProxyComponentFactory (<http://localhost:8000/commons.js:49242:10>), <anonymous>:14:7)
    at HotExportedHomePage (eval at ES6ProxyComponentFactory (<http://localhost:8000/commons.js:49242:10>), <anonymous>:14:7)
    at div
    at div
    at Layout (<http://localhost:8000/commons.js:56159:23>)
    at PageRenderer (eval at ES6ProxyComponentFactory (<http://localhost:8000/commons.js:49242:10>), <anonymous>:14:7)
    at PageQueryStore (eval at ES6ProxyComponentFactory (<http://localhost:8000/commons.js:49242:10>), <anonymous>:14:7)
    at RouteHandler
    at div
    at FocusHandlerImpl (eval at ES6ProxyComponentFactory (<http://localhost:8000/commons.js:49242:10>), <anonymous>:14:7)
    at FocusHandler (<http://localhost:8000/commons.js:7236:19>)
    at RouterImpl (eval at ES6ProxyComponentFactory (<http://localhost:8000/commons.js:49242:10>), <anonymous>:14:7)
    at Location (<http://localhost:8000/commons.js:6976:23>)
    at Router
    at ScrollHandler (eval at ES6ProxyComponentFactory (<http://localhost:8000/commons.js:49242:10>), <anonymous>:14:7)
    at RouteUpdates (eval at ES6ProxyComponentFactory (<http://localhost:8000/commons.js:49242:10>), <anonymous>:14:7)
    at EnsureResources (eval at ES6ProxyComponentFactory (<http://localhost:8000/commons.js:49242:10>), <anonymous>:14:7)
    at LocationHandler (eval at ES6ProxyComponentFactory (<http://localhost:8000/commons.js:49242:10>), <anonymous>:14:7)
    at LocationProvider (eval at ES6ProxyComponentFactory (<http://localhost:8000/commons.js:49242:10>), <anonymous>:14:7)
    at Location (<http://localhost:8000/commons.js:6976:23>)
    at Root
    at StaticQueryStore (eval at ES6ProxyComponentFactory (<http://localhost:8000/commons.js:49242:10>), <anonymous>:14:7)
    at _default"
Oct 18, 2020, 9:58 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– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?