Every single component that you can see in the code below is accused of TS2786, telling me "{component} cannot be used as a JSX component". This is a project that I have for a year now and I'm just doing maintenance. The code works perfectly, but I can't deploy it with the errors. I ran it in localhost and it is as intended.
This started happening just now, it was just ok the last time I updated it. According to the FramerMotion forum, their advice is to just insert @ts-ignore, but the issue is in every component, not just with theirs, and @ts-ignore doesn't work in this file. Also, the deployment error still occurs with the ts-ignore.
My versions:
"dependencies": {
"@heroicons/react": "^2.0.12",
"@sanity/image-url": "^1.0.2",
"@sanity/vision": "^3.35.1",
"framer-motion": "^7.5.3",
"next": "^14.0.2",
"next-sanity": "^7.1.4",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-hook-form": "^7.37.0",
"react-hydration-provider": "^2.1.0",
"react-simple-typewriter": "^4.0.5",
"react-social-icons": "^5.15.0",
"sanity": "^3.35.1",
"styled-components": "^6.1.8",
"swiper": "^8.4.3"
},
"devDependencies": {
"@types/node": "18.8.3",
"@types/react": "18.0.21",
"@types/react-dom": "18.0.6",
"autoprefixer": "^10.4.12",
"eslint": "8.25.0",
"eslint-config-next": "12.3.1",
"postcss": "^8.4.17",
"tailwind-scrollbar": "^2.1.0-preview.0",
"tailwindcss": "^3.1.8",
"typescript": "5.4.3"
}
UPDATE: running npx typesync or npm upgrade or adding resolutions didn't work at all!
Does anyone have any solution for this? Thank you so much!
import type { GetStaticProps } from "next";
import Head from "next/head";
import About from "../components/About";
import Header from "../components/Header";
import Hero from "../components/Hero";
import Skills from "../components/Skills";
import Projects from "../components/Projects";
import Contact from "../components/Contact";
import Courses from "../components/Courses";
import Experiences from "../components/Experiences";
import { motion } from "framer-motion";
import { HydrationProvider, Client } from "react-hydration-provider";
import { fetchPageInfo } from "../utils/fetchPageInfo";
import { fetchSkills } from "../utils/fetchSkills";
import { fetchProjects } from "../utils/fetchProjects";
import { fetchSocials } from "../utils/fetchSocials";
import { fetchExperiences } from "../utils/fetchExperience";
import { Course, Experience, PageInfo, Project, Skill, Social } from "../typings";
import { fetchCourses } from "../utils/fetchCourses";
import Link from "next/link";
import { HomeIcon } from "@heroicons/react/24/solid";
import { Suspense } from "react";
type Props = {
pageInfo: PageInfo;
experiences: Experience[];
courses: Course[];
skills: Skill[];
projects: Project[];
socials: Social[];
};
const Home = ({ pageInfo, experiences, courses, skills, projects, socials }: Props) => {
return (
<HydrationProvider>
<Suspense fallback={<div>Loading...</div>}> </Suspense>
<Client>
<div
className="bg-[rgb(36,36,36)] text-white h-screen snap-y snap-mandatory overflow-y-scroll overflow-x-hidden z-0
scrollbar-thin scrollbar-track-gray-400/20 scrollbar-thumb-amber-400/40"
>
<Head>
<title>Portfolio</title>
<link rel="icon" href="/react.ico" />
</Head>
<Header socials={socials} />
<section id="hero" className="snap-start">
<Hero pageInfo={pageInfo} />
</section>
<section id="about" className="snap-center">
<About pageInfo={pageInfo} />
</section>
<section id="experience" className="snap-center">
<Experiences experiences={experiences} />
</section>
<section id="courses" className="snap-center">
<Courses courses={courses} />
</section>
<section id="skills" className="snap-start">
<Skills skills={skills} />
</section>
<section id="projects" className="snap-start">
<Projects
projects={projects}
/>
</section>
<section id="contact" className="snap-start">
<Contact name={""} email={""} subject={""} message={""} />
</section>
<Link href={'#hero'}>
<footer className="sticky bottom-5 w-full cursor-pointer">
<div className="flex items-center justify-center">
<motion.div
initial={{
opacity: 0,
}}
animate={{
opacity: 1,
}}
transition={{
duration: 1.2,
delay: 0.5,
}}
className="h-8 w-8 rounded-full flex items-center justify-center"
>
<HomeIcon className="h-7 w-17 pb-0.5 hover:grayscale-100 text-[#F7AB0A] animate-pulse" />
</motion.div>
</div>
</footer>
</Link>
</div>
</Client>
</HydrationProvider>
);
};
export default Home;
export const getStaticProps: GetStaticProps<Props> = async () => {
const pageInfo: PageInfo = await fetchPageInfo();
const experiences: Experience[] = await fetchExperiences();
const courses: Course[] = await fetchCourses();
const skills: Skill[] = await fetchSkills();
const projects: Project[] = await fetchProjects();
const socials: Social[] = await fetchSocials();
return {
props: {
pageInfo,
experiences,
courses,
skills,
projects,
socials,
},
revalidate: 60,
};
};
SOLUTION: as I found out in this post, just run npm i react@18 react-dom@18 @types/react@18 @types/react-dom@18. Thanks!