Carousel component: Cannot destructure property "index" of "ascDiffsToSnap[0]"

[aaanh]

Hello,

I'm trying out the Carousel component and I'm encountering this error

Unhandled runtime error: Cannot destructure property "index" of "ascDiffsToSnaps[0]"

The Nextjs error pop-up dialog doesn't open so I had to induce another error (the key props missing when mapping) to open the dialog and open error page of the Carousel component. I can't even expand the stack trace (dialog page keeps "refreshing" when I click on it). The exception doesn't happen on load, it only appears when I click on the Carousel component.

I'm using Tailwind v4.0.14, Nextjs v15.2.2, and React 19.0.0

For reference, my implementation is at: https://github.com/aaanh/homepage/blob/9eaa0016200910c6f478aab811e3c84293244216/src/components/sections/project.tsx#L27-L47

Demo: https://homepage-git-v7-debug-nguyen-hoang-anhs-projects-e232fd6d.vercel.app/ -- the error can be found in the Developer console

[adebiyial]

@aaanh the issue is with the hierarchy.

You have the CarouselPrevious and CarouselNext inside the CarouselContent instead of outside.

// What you have.

<Carousel>
  <CarouselContent>
    <CarouselItem>...</CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

// What you should have.

<Carousel>
  <CarouselContent>
    <CarouselItem>...</CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Your updated code will be:

<Carousel className="z-50">
  <CarouselContent>
    {projects.map((project, idx) => (
      <CarouselItem className="basis-1/3" key={project.title + "-" + idx}>
        <Card
          className="hover:bg-accent/50 dark:border-accent/75 w-[350px] rounded-none border-black transition-all ease-in-out hover:cursor-pointer"
          onClick={() => router.push(project.link_ref ?? "#")}
        >
          <CardHeader>
            <CardTitle>{project.title}</CardTitle>
          </CardHeader>
          <CardContent>
            <p>{project.stack}</p>
          </CardContent>
        </Card>
      </CarouselItem>
    ))}
  </CarouselContent>
  <CarouselPrevious className="z-50" />
  <CarouselNext className="z-50" />
</Carousel>

[aaanh]

Omg, thank you for pointing that out. I should have noticed that much sooner. I was probably smokescreened by the odd error popup behavior.

[adebiyial]

Hahaha. It's O.K. Glad that's fixed now 😊.

[aaanh]

I hope that this'll help people in the future when they search for it 😄

[adebiyial]

I hope so 😊