Carousel error, using Astro: useCarousel must be used within a <Carousel />
#2890
Comments
|
I tried in a new astro project and it works for me, have you abstracted the whole Carousel to a react component? <Layout title="Welcome to Astro.">
<main>
<InteractiveCarousel client:load />
</main>
</Layout>in interactiveCarousel: import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@/components/ui/carousel";
import { Card, CardContent } from "@/components/ui/card";
const InteractiveCarousel = () => {
return (
<Carousel className="w-full max-w-xs">
<CarouselContent>
{Array.from({ length: 5 }).map((_, index) => (
<CarouselItem key={index}>
<div className="p-1">
<Card>
<CardContent className="flex aspect-square items-center justify-center p-6">
<span className="text-4xl font-semibold">{index + 1}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
);
};
export default InteractiveCarousel;Since astro can't handle children from other UI framework as-is. Button & Card works fine cause (I assume) all the children are plain text? |
|
Oh. I was under the impression that it would be fine since it's in one island. And I probably also didn't want to accept that it would be necessary to create a wrapper component for any shadcn components that have subcomponents. 🤦 Thanks for the help and the link to the doc, I missed that section. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
On a fresh installation following the Astro installation instructions, using the Carousel component gives the
useCarousel must be used within a <Carousel />error.Other components such as Button and Card are working.
index.astro:Stack trace:
I have tried using the
<Carousel>...</Carousel>element in a React wrapper component; I have tried addingclient:loadto each child component; usingclient:onlygives the exact same error but in the browser console instead.Possibly a bug?
This is the only reference I could find to this error anywhere, and the proposed solution did not work for me, and I also don't see why the above shouldn't work.
The text was updated successfully, but these errors were encountered: