Remixアプリを実装していてちょくちょく遭遇したエラーについて、簡単にまとめました。エラーハンドリングを試みた際に発生する様子ですので、エラー系でのRemixの動きについてもっと知る必要がありそうです。

遭遇した現象

Remixを使用したReactアプリケーションにおいて、以下のようなエラーが発生しました：

You cannot `useLoaderData` in an errorElement (routeId: root)
TypeError: Cannot destructure property 'categories' of '__vite_ssr_import_2__.useLoaderData(...)' as it is undefined.

このエラーは<CategoriNavigation>コンポーネント内で発生している様子でした。

対策

ErrorBoundary系の処理ではuseLoaderDataでデータが取得できない様子です。そのため、このようにuseLoaderDataフックを使うケースを調整しました。

   // 通常のコンポーネント
   export function CategoriNavigation() {
     const data = useLoaderData<LoaderData>();

     if (!data || !('categories' in data)) {
       return <div>データの読み込みに失敗しました</div>;
     }

     const { categories } = data;

     return (
       // categories を使用したJSX
     );
   }

なんてことはないnullableなデータのハンドリングですが、エラーメッセージからここに辿り着くまで時間がかかったため、あとで振り返れるようにここにまとめます。