#The default export is not a React Component

1 messages · Page 1 of 1 (latest)

daring flicker
#

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>

);
}`

urban pollenBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

daring flicker
#

Here is a picture of the error message if that helps

image.png
earnest dagger
#

Code looks good to me?

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 params

daring flicker
#

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

mystic kindle
#

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.

daring flicker
#

Omg im so dumb

#

Thank you ❤️