Typescript Error

[Shivam Mishra]

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 '

Mike Starr commented 9 months ago

I'm seeing the same issue. Even if I strip away the details from VerticalTimelineElement so it's like this:
<VerticalTimeline lineColor=""> <VerticalTimelineElement /> </VerticalTimeline>
I still see the error Type 'Element' is not assignable to type 'ReactNode'.

[Patryk Wargacki]

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

[Patryk Wargacki]

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",

[Shivam Mishra]

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

[Patryk Wargacki]

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"
  }

[Shivam Mishra]

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.

[Patryk Wargacki]

@mshivam019

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

[Shivam Mishra]

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