The expected type comes from property 'items' which is declared here on type 'IntrinsicAttributes & Partial<TimelineProps>'

[TheBlapse]

Code:

import React from "react";
import { Chrono } from "react-chrono";

const items = [
  {
    title: "December 2021",
    cardTitle: "Lagrangian Mechanics for High schoolers",
    url: "https://youtube.com/playlist?list=PL70VV8-MvPJAdex1C51G33GXGWg2KUC0r",
    media: {
      name: "Battle of britain",
      source: {
        url: "https://www.youtube.com/embed/gPMgYC0sXos"
      },
      type: "VIDEO"
    },
    cardSubtitle:
      "In this series, Abhiram taught the various concepts of Lagrangian mechanics on a conceptual level which will be valuable in problem-solving. It is really useful and informative for physics enthusiasts around the world.",
  },

];

const events = () => {
  return (
    <>
      <h3 className="pt-16 flex w-full text-darkblue align-center items-center justify-center">
        Timeline
      </h3>
      <div className=" py-5">
        <Chrono
          slideShow
          mode="VERTICAL_ALTERNATING"
          items={items}
          useReadMore
          fontSizes={{
            cardSubtitle: "0.85rem",
            cardText: "0.8rem",
            cardTitle: "1rem",
            title: "1rem",
          }}
          theme={{
            primary: "#022b3a",
            secondary: "#54c1ff",
            cardBgColor: "white",
            cardForeColor: "#022b3a",
            titleColor: "#022b3a",
            titleColorActive: "#022b3a",
          }}
        ></Chrono>
      </div>
    </>
  );
};

export default events;

Errors:

Type '{ title: string; cardTitle: string; url: string; media: { name: string; source: { url: string; }; type: string; }; cardSubtitle: string; }[]' is not assignable to type 'TimelineItemModel[]'.
  Type '{ title: string; cardTitle: string; url: string; media: { name: string; source: { url: string; }; type: string; }; cardSubtitle: string; }' is not assignable to type 'TimelineItemModel'.
    The types of 'media.type' are incompatible between these types.
      Type 'string' is not assignable to type 'MediaType'.

The expected type comes from property 'items' which is declared here on type 'IntrinsicAttributes & Partial<TimelineProps>'

Using Next.JS, tailwind css with typescript.

[bigbigDreamer]

I don't think it's necessarily a bug because ts doesn't automatically compile to match complex types without explicitly telling ts exactly what the items are .

The code above is a correct example, at least I haven't encountered this error reported.

[yianni-ververis]

I confirm. I had the same issue but when I used TypeLineItem[], everything is fine. Thank you @bigbigDreamer