Error when trying to use BreadcrumbList schema.

[axelferb]

So setting up the structure for my BreadcrumbList i end up with this here:

export function BreadCrumbSchema() {
  return <JsonLd<BreadcrumbList>
    item={{
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [
       {
        "@type": "ListItem",
        position: 1,
        item:
        {
         "@id": "https://example.com/dresses",
         name: "Dresses"
        }
       },
      ]
     }} />;
}

Yet this produces ts errors when trying to run npm start.

Errormesage

TypeScript error: No overload matches this call.
  Overload 1 of 2, '(props: Readonly<{ item: WithContext<BreadcrumbList>; }>): JsonLd<BreadcrumbList>', gave the following error.
    Type '{ "@type": string; position: number; item: { "@id": string; name: string; }; }[]' is not assignable to type 'string | ({ "@type": "FinancialService"; } & ThingBase & { "actionableFeedbackPolicy"?: string | ({ "@type": "CreativeWork"; } & ThingBase & { "about"?: string | ({ "@type": "FinancialService"; } & ... 4 more ... & { ...; }) | ... 797 more ... | undefined; ... 94 more ...; "workTranslation"?: ({ ...; } & ... 1 more ...'.
      Type '{ "@type": string; position: number; item: { "@id": string; name: string; }; }[]' is not assignable to type 'Thing[]'.
        Type '{ "@type": string; position: number; item: { "@id": string; name: string; }; }' is not assignable to type 'Thing'.
          Type '{ "@type": string; position: number; item: { "@id": string; name: string; }; }' is not assignable to type 'HowToTool'.
            Type '{ "@type": string; position: number; item: { "@id": string; name: string; }; }' is not assignable to type '{ "@type": "HowToTool"; }'.
              Types of property '"@type"' are incompatible.
                Type 'string' is not assignable to type '"HowToTool"'.
  Overload 2 of 2, '(props: { item: WithContext<BreadcrumbList>; }, context?: any): JsonLd<BreadcrumbList>', gave the following error.
    Type '{ "@type": string; position: number; item: { "@id": string; name: string; }; }[]' is not assignable to type 'string | ({ "@type": "FinancialService"; } & ThingBase & { "actionableFeedbackPolicy"?: string | ({ "@type": "CreativeWork"; } & ThingBase & { "about"?: string | ({ "@type": "FinancialService"; } & ... 4 more ... & { ...; }) | ... 797 more ... | undefined; ... 94 more ...; "workTranslation"?: ({ ...; } & ... 1 more ...'.
      Type '{ "@type": string; position: number; item: { "@id": string; name: string; }; }[]' is not assignable to type 'Thing[]'.
        Type '{ "@type": string; position: number; item: { "@id": string; name: string; }; }' is not assignable to type 'Thing'.
          Type '{ "@type": string; position: number; item: { "@id": string; name: string; }; }' is not assignable to type 'HowToTool'.
            Type '{ "@type": string; position: number; item: { "@id": string; name: string; }; }' is not assignable to type '{ "@type": "HowToTool"; }'.
              Types of property '"@type"' are incompatible.
                Type 'string' is not assignable to type '"HowToTool"'.  TS2769

    35 |       "@context": "https://schema.org",
    36 |       "@type": "BreadcrumbList",
  > 37 |       "itemListElement": [
       |       ^
    38 |        {
    39 |         "@type": "ListItem",
    40 |         position: 1,

Any clue what might be causing this? I have been following the guidelines from schema.org and that seems to always error out.

[axelferb]

Update

Also tried to do it this way:

export function BreadCrumbSchema() {
  return <JsonLd<BreadcrumbList>
    item={{
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      itemListElement: [
       {
        "@type": "ListItem",
        position: 1,
        item:
        {
         "@id": "https://example.com/dresses",
         name: "Dresses"
        }
       },
      ]
     }} />;
}

[Eyas]

Hi there. What version of schema-dts do you have? I think updating it might fix this issue.

The issue here is that schema.org/ListItem has a bunch of sub-types, one of which is HowToItem (and others). A previous version of schema-dts did not support creating intermediate types and only allowed you to create "the most speicfic" type, which was a bug.

This is fixed in 0.3.1 and above. I'd recommend the latest, though (0.4.2).

[axelferb]

    "schema-dts": "^0.4.2",
    "typescript": "^3.6.2",

Seems like i am already using 0.4.2, yet it still does not work 😕

[Eyas]

Oh I see. I mis-read the error. The compiler is complaining about the type of "ListItem.Item" not "ListItem".

You have:

{
  "@id": "https://example.com/dresses",
  "name": "Dresses"
}

"Item" is expected to be of type Thing (or Thing[]). In Schema.org I think it's fine to skip "@type" when you're referencing something by "@id", but it's hard to model that in schema-dts.

The general solution here is to give your item a type. Any type in Schema.org (anything under "Thing") will fit here. E.g. WebPage, AboutPage, CollectionPage, ItemPage, etc.

[axelferb]

Thanks for the speedy answers, will try that!

[axelferb]

Do you mean something like this?

export function BreadCrumbSchemaNorway() {
  return <JsonLd<BreadcrumbList>
    item={{
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      itemListElement: [
       {
        "@type": "ListItem",
        position: 1,
        item:
        {
        "@type": "WebPage",
         "@id": "https://example.com/dresses",
         name: "Dresses"
        }
       },
      ]
     }} />;
}

[OscarBarrett]

Casting your items to Thing will work.

e.g.

<JsonLd<BreadcrumbList>
  item={{
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    itemListElement: [{
      '@type': 'ListItem',
      position: 1,
      item: {
        '@type': 'WebPage',
        '@id': 'https://example.com/dresses',
        name: 'Dresses'
      } as Thing
    }]
  }}
/>

And it will still warn you if you try to use something that is invalid.

[axelferb]

Now works perfectly! Thanks alot for helping me solve this!