<DefaultListItem> was created with unknown prop 'portableText'

[kamerat]

Warning comes when using a bullet list.

The Issue is that your component defaultListItem does not have the prop portableText present:

https://github.com/portabletext/svelte-portabletext/blob/63d0125ae8029870f0621035eaecdf4fb1c46856/src/lib/defaultComponents/DefaultListItem.svelte#L1

This will cause svelte to trigger a console warning if in development mode.

There is no trivial way to disable this locally as of writing this. There is an ongoing discussion in the svelte repo where people is wishing for an option to disable this.

Even if we were able to disable this warning, I think it is still an issue that the item gets these props when there's nothing the component does with them. I think the best solution here would be to not add the props in the first place.

[kamerat]

There is a workaround one can do as we wait for svelte to allow for ignore these warnings or for this repo to fix not sending the prop.

Since the defaultListItem is just a li with a slot, we can recreate it ourselfs and add a unused prop portableText:

<!-- CustomDefaultListItem.svelte -->
<script lang="ts">
    export let portableText = null
</script>

<li><slot/></li>

<!-- myComponent.svelte -->
<script lang="ts">
    import { PortableText } from '@portabletext/svelte'
    import CustomDefaultListItem from "./CustomDefaultListItem.svelte";
</script>

<PortableText
    value={content}
    components={{
        listItem: {
            bullet: CustomDefaultListItem,
            number: CustomDefaultListItem,
        }
    }}
/>

[StanSkrivanek]

Still struggle with this "warning" as solution above does not work for me.

[binoy14]

Setting it as const and null made the warning go away for me and svelte-check also doesn't complain. Code below

<script lang="ts">
  export const portableText = null;
</script>