Astro の世界 🚀

React コンポーネントから Astro コンポーネントは使えない

Parent.tsx 内で Child.atsro をインポートしてコンポーネントとして使おうとすると以下のエラーが表示された。

Uncaught InvalidComponentArgs: Invalid arguments passed to <コンポーネント名> component.

原因

Astro コンポーネント（.astro ファイル）を React コンポーネント内から直接インポートして使用することは、Astro の現在のバージョン（v4.1.3）ではサポートされていないから。

↓ GPT 先生のお言葉。

Astro は、静的サイトジェネレータとしての機能を持ち、.astro ファイル内で React コンポーネントを使用することをサポートしていますが、その逆（React コンポーネント内で Astro コンポーネントを使用する）は想定されていません。

Astro コンポーネントは、サーバーサイドでのレンダリングを前提としており、ビルド時に HTML として出力されます。一方で、React コンポーネントはクライアントサイド、またはサーバーサイド（SSR）で動的にレンダリングされることを前提としています。このため、React ファイルから Astro ファイルを直接インポートして使用しようとすると、期待するような動作をしないか、エラーが発生する可能性が高いです。

それぞれのコンポーネントを Astro コンポーネントから React コンポーネントに移行作業中のタイポで気づかなかった。最初は引数の型が間違っているのかと時間を溶かした。