shadcn-uiをAstroで使おうとしたときに躓いたところ

Astroとshadcn-uiデビューをする

最近話題のSSGフレームワークのAstroにデビューしたときに、同時に最近話題のshadcn/uiを使ってみようと思ったのですが、躓いた部分があったので忘れないために残します。

https://astro.build/

https://ui.shadcn.com/

Astroでshadcn-uiを使うまで

Astroにshadcn-uiをインストールするためには、shadcn/uiのドキュメント記載の通りに進めていけば問題ないです。

Astroは「Astroインテグレーション」という機能により、TailwindcssやReactを始めとする様々な機能を簡単に追加することができるのでとても便利です。

AstroはSSGだけではなく、SSRにも対応しているのですが、CloudflareやVercelへデプロイして簡単にSSRができるようなSSRアダプターも用意されています。

https://docs.astro.build/ja/guides/integrations-guide/

使えないコンポーネントがある

インストールが終わってshadcn/uiを使えるようになりましたが、Accordionというコンポーネントを使おうとした際に以下のエラーが発生しました。

[ERROR] [UnhandledRejection] Astro detected an unhandled rejection. Here's the stack trace: Error: `Accordion` must be used within `Accordion`

画面では以下のように表示されています。

AccordionはAccordionの中で使用しなければならないというようなエラーのようです。

ここでコードを見返してみます。

src/index.astro

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

そもそもこれもドキュメントからコピペしてるのでおかしな点はありません。

というかそもそもAccordionはAccordionの中で使用しなければならないってどういうことだよってことに気づきます。

使えるようにする

少し調べたところshadcn/uiのGitHub Issueがヒットしました。

使用しているコンポーネントは違いますが、症状は同じような感じです。

したがって使用したいshadcnのコンポーネントをReactコンポーネントにしてAstroで呼び出すようにしてみます。

src/components/AccordionComponent.tsx

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "./ui/accordion";

export const AccordionComponent = () => {
  return (
    <Accordion type="single" collapsible>
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. It adheres to the WAI-ARIA design pattern.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
};

あとはAstroで読み込みます。

src/index.astro

---
+ import { AccordionComponent } from "@/components/AccordionComponent"
---
~~~
+ <AccordionComponent client:load />

すると・・・

無事に表示されて動作もすることが確認できました！

先に挙げたIssueでは原因として、AstroはReactコンポーネントごとにアイランドを生成しており、それらが共有されていないために起こると書かれていますが、正直このあたりのアイランドの仕組みがいまいちわかっていないので詳しいことはわからないです。

これからAstroやReactについてもう少し勉強して使いこなせるようになりたいなぁと思った今日でした。

ありがとうございました。