Unknown list item style "normal" while using Sanity

[kamerat]

Using the default Sanity bullet list, this warning comes in the console:

Unknown list item style "normal", specify a component for it in the 'components.listItem' prop

const content = [
    {
        "_key": "3a27e049b445",
        "_type": "block",
        "children": [
            {
                "_key": "3542518d9367",
                "_type": "span",
                "marks": [],
                "text": "This is a list item"
            }
        ],
        "level": 1,
        "listItem": "bullet",
        "markDefs": [],
        "style": "normal"
    }
]

<PortableText value={content} />

[kamerat]

Sanity's default default style has the name of normal. When adding a list(bullet or number) the normal style is applied to this block by default unless set to something else.

There are three workarounds for this issue if you are using Sanity:

1. Create a bullet type in Sanity

    {
        title: 'Block',
        type: 'block',
        styles: [
           //...
            { title: 'Bullet', value: 'bullet' }, //<-- Adding a custom style of tyle bullet will also surpress warning if used on bullet list
        ],
        lists: [{ title: 'Bullet', value: 'bullet' }],
    },
   

2. Use a custom list component

    <script lang="ts">
        import { PortableText, DefaultListItem } from '@portabletext/svelte'
        const content = [...]
    </script>
    
    <PortableText
        value={content}
        components={{
            listItem: {
                bullet: DefaultListItem,
                number: DefaultListItem,
                normal: DefaultListItem //<-- Adding "normal" as key and defaultListItem as value will supress the warning
            }
        }}
    />
   

3. Using onMissingComponent prop

   <script lang="ts">
       import { PortableText} from '@portabletext/svelte'
       const content = [...]
   </script>
   
   <PortableText
       value={content}
       onMissingComponent={false}
   />
   

The second option above would be recomended as it is nontrivial to add "bullet style" to all bullet points in the sanity WYSIWYG editor. It will display the default list normally, just without a warning.

This is also the default action of this component if it comes across a list with an undefined list style as seen here.

[fschroiff]

You would also need to add other styles when you go for option two, like h2, h3 etc.

[progone]

@kamerat
Did the solution work for you?

[kamerat]

Hi @progone. Yes indeed. I currently use solution 2 as stated in my previous pos :) Works well.

[Renkas]

Why isn't normal: DefaultListItem there by default?

What a waste of time for every developer that uses Sanity with Svelte to have to debug this error and do it manually