Get help on Discord

Issues with rendering standard text in Svelte PortableText v2 component

16 replies
Last updated: Mar 8, 2023
I hope somebody can point me in the right direction, I’ve been banging my head against the keyboard for to long now! It’s really 3 issues, but I think they’re related.
I’m using
svelte-portabletext v2 to render my Sanity portabletext. I’ve got few custom components, which outputs ok, but the non-custom, standard text is having issues.1. In the console I get the following error:

Unknown list item style "normal", specify a component for it in the `components.listItem` prop
2. In the rendered HTML page everything is there, but if I include a link in a paragraf, the whole paragraf disappears! (I wonder if it’s because I had to make a custom Block from another error asking me to add one?)
3. And most odd, the wrapping div with id=svelte 
<div _id_="svelte">%sveltekit.body%</div>
disappears when I reload the page, or enter it directly via URL, but the ``%sveltekit.body%`` still loads. But if I navigate from another page, the wrapping div#svelte is there.
My kitchensink page with the PortableText component:

<script>
import { imageUrlFor } from '$lib/utils/_sanity';
import { PortableText } from '@portabletext/svelte';
import Cta from '$lib/utils/serializers/cta.svelte';
import Link from '$lib/utils/serializers/link.svelte';
import Code from '$lib/utils/serializers/code.svelte';
import ImageBlock from '$lib/utils/serializers/imageBlock.svelte';
import AuthorBlock from '$lib/utils/serializers/authorBlock.svelte';
import Button from '$lib/utils/serializers/button.svelte';
import Vimeo from '$lib/utils/serializers/vimeo.svelte';
import EmbedHTML from '$lib/utils/serializers/embedHTML.svelte';
import Block from '$lib/utils/serializers/block.svelte';
import ListItem from '$lib/utils/serializers/listItem.svelte';
</script>

<PortableText
  value={post.body}
  components={{
    marks: {
      link: Link,
    },
    types: {
      cta: Cta,
      code: Code,
      image: ImageBlock,
      authorReference: AuthorBlock,
      button: Button,
      vimeo: Vimeo,
      embedHTML: EmbedHTML,
      block: Block,
      listItem: {
        bullet: ListItem,
        number: ListItem,
        normal: ListItem
      }
    }
  }}
/>
Feb 27, 2023, 9:55 AM
Mar 8, 2023, 3:31 PM
jedi move! I was just looking at this right now, again
Mar 8, 2023, 3:31 PM
I’ve narrowed it down to coming from my custom Block element now.
// block.svelte
<script>
	export let portableText
	$: ({value} = portableText)
	$: style = value.style || 'normal'
</script>

{#if style === 'normal'}
	<p>{value}</p>
{:else}
	{value}
{/if}
However, when this is in use I get 
[object object]
. So I’m close, but I can’t figure out why I’m getting object and not the contents?
Mar 8, 2023, 3:38 PM
Hi
user S
. What do you get when you log out 
value
?
Mar 8, 2023, 4:30 PM
hi! I’m getting 
undefined
Hmm 🤔
Mar 8, 2023, 4:32 PM
figures, log portableText and see what’s actually getting passed there
Mar 8, 2023, 4:33 PM
using 
{@debug value}
I get
Object { 
value: Object { _key: "09334c0068b5", _type: "block", style: "normal", … }}

Mar 8, 2023, 4:33 PM
Logging portableText:
Mar 8, 2023, 4:36 PM
Output from 
JSON.stringify(value, 0, 2)
, so it’s there, I think?
  {
  "_key": "a916b44a5f35",
  "_type": "block",
  "children": [
    {
      "_key": "57e89ed06f2f",
      "_type": "span",
      "marks": [
        "05cf5d422daf"
      ],
      "text": "reMarkable"
    },
    {
      "_key": "451370a506d0",
      "_type": "span",
      "marks": [],
      "text": " is on a quest to help more people think better through technology. "
    }
  ],
  "markDefs": [
    {
      "blank": null,
      "class": null,
      "href": "<http://example.com|example.com>"
    }
  ],
  "style": "normal"
}
Mar 8, 2023, 4:43 PM
But shouldn’t the 
markDefs
have a reference to the 
_key
? Or say it’s of type 
link
?
Mar 8, 2023, 4:44 PM
nah. no good. I’m starting to feel pretty dumb . have waisted so much time on this now
Mar 8, 2023, 5:51 PM
user Q
would you mind enlightening me on why it figures that I get 
undefined
when I log out 
value
?
Mar 8, 2023, 5:56 PM
But shouldn’t the 
markDefs
have a reference to the 
_key
? Or say it’s of type 
link
?
Indeed, those are not 
markDefs
properties I’ve seen before.

would you mind enlightening me on why it figures that I get 
undefined
when I log out 
value
?
Where are you seeing undefined?
Mar 8, 2023, 7:05 PM
user A
omg thank you! You led me on the right track with those 
markDefs
!
A while back I tried creating some custom fields for links, to select opening in new tab or adding a class. So my groq looked like this:

markDefs[]{
  _type == 'link' => {
    blank,
    href,
    class[0]
  }
}
So not everything needed was included. Now adding 
…
however, I get everything working!
markDefs[]{
  _type == 'link' => {
    ...
  }
}
I’m so incredibly relieved now.
Mar 8, 2023, 8:22 PM
Great! Thanks for following up to let us know. Glad to hear you figured it out. 😀
Mar 8, 2023, 8:23 PM
I do not want to know how many hours that cost me 😭
Mar 8, 2023, 8:24 PM

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?