Handle 404 page

[wzulfikar]

Since we're passing the control for router to Remix, I suppose the Remix app need to be aware that it should handle fallback page. Is that correct?

Passing the control for router to remix: https://github.com/jarle/remix-adonisjs/blob/697e3517193fa72617c83ac9380a3d37aed285db/examples/with-tailwind-and-shadcn/start/routes.ts#L12-L14

Remix codes need to be aware that it needs to handle fallback (it doesn't do that, in Tailwind example): https://github.com/jarle/remix-adonisjs/blob/697e3517193fa72617c83ac9380a3d37aed285db/examples/with-tailwind-and-shadcn/resources/remix_app/root.tsx#L35

For 404 pages, the loader will return undefined and thus I'd get this error:

If I added {} fallback, the 404 page works:

const { prefersDarkMode } = useLoaderData<typeof loader>() || {}

I wonder if this kind of behavior should be noted in README or docs.

---

Side note – Awesome project! Been looking for one man framework in JS and Adonis v6 seems most appealing to me. Because I still want to retain React UX, this Remix template looks promising.

[jarle]

Hi, thanks for reporting it! The cause of this was actually that the example used the Layout component in root.tsx and tried accessing loader data from it. In the remix docs they warn against accessing loader data from this special component, so I have rewritten it a bit in https://github.com/jarle/remix-adonisjs/commit/36886ce954d044b4f866614e6a7936ed985bbfab.

There is no special logic that is needed to communicate errors to Remix since it is responsible for the routing (the 404 doesn't come from AdonisJS). Remix ships with a default root error boundary that should pick up 404s automatically: