The default export is not a React Component
Answered
jade posted this in #help-forum
jadeOP
Hey, in the following file under
src\app\projects\[slug]\page.tsx i fetch the error Error: The default export is not a React Component in "/projects/abiball/page". Can someone help me with this error? Thank in advance!import Footer from "@/components/footer";
import Header from "@/components/header";
import Image from "next/image";
import { notFound } from "next/navigation";
import projects from "@/data/projects.json";
export default function ProjectPage({ params }: { params: { slug: string } }) {
const project = projects.find((p) => p.slug === params.slug);
if (!project) {
notFound();
}
return (
<div>
<Header />
<div className="w-full max-w-7xl mx-auto px-5 lg:px-2 mt-8 pb-12">
<h1 className="text-4xl md:text-5xl font-bold">{project.title}</h1>
<p className="text-muted-foreground mt-2">Jahr: {project.year}</p>
<div className="mt-8 relative aspect-video w-full">
<Image
src={project.thumbnail}
alt={project.thumbnailAlt}
fill
className="object-cover rounded-lg"
/>
</div>
<div className="mt-8">
<h2 className="text-2xl font-semibold mb-4">Leistungen</h2>
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
{Object.entries(project.services).map(([service, value]) => (
value && (
<div key={service} className="bg-muted p-4 rounded-lg">
<p className="capitalize">{service}</p>
</div>
)
))}
</div>
</div>
</div>
<Footer />
</div>
);
}Answered by joulev
Seems like the bug is in a projects/abiball/pags.tsx file if it exists, and not this file.
If not, I would try deleting .next and retrying again. Your code looks good.
If not, I would try deleting .next and retrying again. Your code looks good.
7 Replies
Code looks good to me?
And idk why you’re not getting an error for not typing
Your component should be marked as
And idk why you’re not getting an error for not typing
params correctly. Since you’re are in latest Next.js (v15.3) params is now a promise.({ params }:
{ params: Promise<{ slug: string}>})Your component should be marked as
async and you have to await paramsjadeOP
Thanks for the help! But can you maybe show me exactly what i should change in the code?
Sorry but im pretty new and im trying to learn nextjs
Seems like the bug is in a projects/abiball/pags.tsx file if it exists, and not this file.
If not, I would try deleting .next and retrying again. Your code looks good.
If not, I would try deleting .next and retrying again. Your code looks good.
Answer
jadeOP
Omg im so dumb
Thank you ❤️