Typescript Error

[mshivam019]

What am i doing wrong

import React from "react";
import {
  VerticalTimeline,
  VerticalTimelineElement,
} from "react-vertical-timeline-component";
import "react-vertical-timeline-component/style.min.css";
import { useTheme } from 'next-themes';
import { BuildingOffice2Icon } from '@heroicons/react/24/solid';
import { ExperienceProps } from '@/types';

export default function Experience({ experience }: ExperienceProps) {
  const { theme } = useTheme();

  return (
     <div
      id="Experience"
      data-aos="fade-up"
      className="mt-4 flex flex-col justify-center items-center max-w-6xl rounded-md mx-auto"
    >
      <h1 className="font-semi-bold text-3xl lg:pl-0 pl-2 md:text-4xl text-black dark:text-white mr-auto pb-3">
        Experience
      </h1>
      <VerticalTimeline animate={false} lineColor={theme === "light" ? "black" : "gray"}>
        {experience.tabs.map((item) => (
          <React.Fragment key={item.title}>
            <VerticalTimelineElement
              contentStyle={{
                background:
                  theme === "light" ? "#f3f4f6" : "rgba(255, 255, 255, 0.05)",
                boxShadow: "none",
                border: "1px solid rgba(0, 0, 0, 0.05)",
                textAlign: "left",
                padding: "1.3rem 2rem",
              }}
              contentArrowStyle={{
                borderRight:
                  theme === "light"
                    ? "0.4rem solid #9ca3af"
                    : "0.4rem solid rgba(255, 255, 255, 0.5)",
              }}
              date={item.date}
              icon={<BuildingOffice2Icon />}

              iconStyle={{
                background:
                  theme === "light" ? "white" : "gray",
                fontSize: "1.5rem",
                boxShadow: "none",
                border: theme === "light" ? "2px solid black" : "2px solid rgba(255, 255, 255, 0.15)",
              }}
            >
              <h3 className="font-semibold capitalize">{item.title}</h3>
              <p className="font-normal !mt-0">{item.location}</p>
              <p className="!mt-1 !font-normal text-gray-700 dark:text-white/75">
                {item.descriptionOne}
              </p>
              <p className="!mt-1 !font-normal text-gray-700 dark:text-white/75">
                {item.descriptionTwo}
              </p>
              <p className="!mt-1 !font-normal text-gray-700 dark:text-white/75">
                {item.descriptionThree}
              </p>
            </VerticalTimelineElement>
          </React.Fragment>
        ))}
      </VerticalTimeline>
    </div>
  );
}

the error i am getting is:

No overload matches this call. Overload 1 of 2, '(props: VerticalTimelineProps | Readonly): VerticalTimeline', gave the following error. Type 'Element[]' is not assignable to type 'ReactNode'. Type 'Element[]' is not assignable to type 'Iterable'. The types returned by '[Symbol.iterator]().next(...)' are incompatible between these types. Type 'IteratorResult<Element, any>' is not assignable to type 'IteratorResult<ReactNode, any>'. Type 'IteratorYieldResult' is not assignable to type 'IteratorResult<ReactNode, any>'. Type 'IteratorYieldResult' is not assignable to type 'IteratorYieldResult'. Type 'Element' is not assignable to type 'ReactNode'. Property 'children' is missing in type 'Element' but required in type 'ReactPortal'. Overload 2 of 2, '(props: VerticalTimelineProps, context: any): VerticalTimeline', gave the following error. Type 'Element[]' is not assignable to type 'ReactNode'.ts(2769) index.d.ts(207, 9): 'children' is declared here. index.d.ts(12, 5): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly' index.d.ts(12, 5): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly' (parameter) experience: Experiences

[mikestarrdev]

I'm seeing the same issue. Even if I strip away the details from VerticalTimelineElement so it's like this: `

I still see the errorType 'Element' is not assignable to type 'ReactNode'.`

[Nlferu]

Hello guys,

I have faced the same issue once I converted from js into ts. I have fixed that linting error (because code is working fine even with that type error) by creating fresh next js project. Remember to use next version lower than 13.5

[Nlferu]

Hi @mshivam019 @personnamedmike

I have figured out where this error comes from. It is because of packages you are using. It is probably just @types libraries, but here you have my packages that shows no errors while using experimental features and stephane component.

    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "18.2.7",
    "react": "^18",
    "react-dom": "^18",
    "next": "13.4.19",
    "typescript": "^5",

[mshivam019]

I already have these types in my package.json and I am using next version 13.4.13, still facing the same issue @Nlferu

[Nlferu]

Hi @mshivam019

Are you sure you have same versions even in your lockfile? For example yarn.lock?

Below you can see my whole package.json and it is working perfectly fine for my project:

  "dependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "18.2.7",
    "@react-email/components": "^0.0.7",
    "@react-email/tailwind": "^0.0.8",
    "react": "^18",
    "react-dom": "^18",
    "next": "13.4.19",
    "typescript": "^5",
    "autoprefixer": "^10",
    "postcss": "^8",
    "tailwindcss": "^3",
    "eslint": "^8",
    "eslint-config-next": "13.4.19",
    "clsx": "^1.2.1",
    "framer-motion": "^10.16.4",
    "react-icons": "^4.10.1",
    "react-typed": "^1.2.0",
    "react-hot-toast": "^2.4.1",
    "react-intersection-observer": "^9.5.2",
    "react-tsparticles": "^2.9.3",
    "react-vertical-timeline-component": "^3.6.0",
    "resend": "^0.16.0",
    "tsparticles": "^2.9.3"
  },
  "devDependencies": {
    "@types/react-vertical-timeline-component": "^3.3.4"
  }

[mshivam019]

I ended up using this in my typescript project, However I did try this component in my another js project and it was working without any issues.

[Nlferu]

@mshivam019

Nice, it looks almost the same and it is supporting higher next versions

[mshivam019]

fixed by upgrading to "@types/react": "18.2.28",