PortableText [components.type] is missing "block"

[spacedawwwg]

Hi, I'm using the tool out of the box to try render Sanity portable text (no custom components)

<PortableText value={blocks} />

But I've hit a bit of a brick wall as the block content (just generic block content) is always saying:

PortableText [components.type] is missing "block"

<div style="display:none" data-portabletext-unknown="type">
  PortableText [components.type] is missing "block"
</div>

my blocks just look like this:

[{
  "children": [
    {
      "_type": "span",
      "marks": [],
      "text": "Also, we recognise that we can make a significant contribution to our sustainability agenda, by moving away from paper invoicing, to electronic or e-invoicing solutions.",
      "_key": "fcea4de7435f"
    }
  ],
  "style": "normal",
  "_key": "846a2ceeb1b8",
  "_type": "block"
}
// etc. etc.
]

any idea what I might be missing?

[theisel]

@spacedawwwg I tried to reproduce your issue on Stackblitz without luck. Which version of the library component and Astro are you using?

[spacedawwwg]

This is nuts, my block content is working on Stackblitz too!

Ok, so it's something in my set that im going to have to debug.

[spacedawwwg]

There must be some conflicting package or something in my setup as I've duplicated the Stackblitz 1-to-1 and I'm still getting the same issue 🤔

[theisel]

I would double check the payload for anything missing, like _key missing from markDefs, as this will fail the isPortableTextBlock assertion and be passed on to the custom type handler.

[spacedawwwg]

I would double check the payload for anything missing, like _key missing from markDefs, as this will fail the isPortableTextBlock assertion and be passed on to the custom type handler.

I don't think it's this as the same output works perfectly fine on a forked version of your Stackblitz: https://stackblitz.com/edit/github-4darib-5d2hgy?file=src%2Fpages%2Findex.astro

Funnily enough, it does render two "blocks" fine as paragraphs (randomly I'll add)... see the two paragraphs rendering fine between the mostly PortableText [components.type] is missing "block" (ignore the custom blocks, I'll get to those components when i can get all the headings and paragraphs to render)

As you can see from the Stackblitz, the exact same data used but working... it's a mind-boggle:

[spacedawwwg]

@theisel I've found it.

!("markDefs" in node)

This does not account for markDefs: undefined which is being retured from Sanity in query (but not output when I wrote to a json file)

Line 44 in @portabletext/toolkit asserters.ts https://github.com/portabletext/toolkit/blob/12e86ede8a9391947ee70ab7c187d32651be0b45/src/asserters.ts#L44

I'm going to report an issue with a PR now

[spacedawwwg]

for anyone stuck with this issue querying from Sanity, and if the toolkit isn't changed, you can get around the issue like so (before passing it to the value prop):

JSON.parse(JSON.stringify(data));

Which will remove the markDefs: undefined as mention in the previous comment

[theisel]

@spacedawwwg nice work! I'll watch out for the patch.