【Remix】TsyringeとResourceルートを使用する場合に注意が必要なこと

RemixとTsyringeを使用して、アプリケーションを作成していた。
Auth0を導入する過程で、/auth/auth0と/auth/auth0/callbackというルートを作成するために、app/routes/auth/auth0.tsxとapp/routes/auth/auth0/callback.tsxを作成した。

// 問題が発生したときのファイル構造
- routes
  - auth
    - auth0.tsx
    - auth0.callback.tsx

ところが、アプリを起動して上記のルートと関係のない"/"や他のルートにアクセスしたところ、今まで発生しなかったエラーがブラウザ側で発生した。

Uncaught Error: tsyringe requires a reflect polyfill. Please add 'import "reflect-metadata"' to the top of your entry point.

これはTsyringeのREADME.mdにも記載されていて、Tsyringeを使用する場合は、import "reflect-metadata"をエントリーポイントに追加する必要があるということを意味している。

ただ、すでにapp/entry.client.tsxやapp/entry.server.tsxにimport "reflect-metadata"を追加しているので、なぜこのエラーが発生するのか分からなかった。

色々数時間をかけて分かったことは、auth.tsというファイル自体を作成する必要があったということだった。

auth.tsx

import type { LoaderArgs } from "@remix-run/server-runtime";
import { redirect } from "react-router";

export const loader = ({ request }: LoaderArgs) => redirect("/login")

これにより、ブラウザ側で上記で発生したimport "reflect-metadata"に関するエラーが発生しなくなった。

なので、Resourceルートを作成する場合でかつTsyringeをそのResourceルートで使用する場合はディレクトリ名と同じファイルのResourceルートを作成する必要があることに注意が必要。

// 解決したときのファイル構造
- routes
  - auth.tsx
  - auth
    - auth0.tsx
    - auth0.callback.tsx