Probable issue with HMR.

[kupras06]

export default function CategoriesPage(props: Route.ComponentProps) {
	console.log("props.loaderData", props.loaderData);
	const categories =
		// @ts-expect-error - loaderData is not null
		props.loaderData.categories ?? props.loaderData?.data?.categories;

in the above example, I am fetching categories in my loader, and returning it using data api, example below.

export async function loader(requestArgs: Route.LoaderArgs) {
	return await partnerAuthLoader(requestArgs, async (authArgs) => {
		authArgs.auth.accessToken;
		const headers = await getDefaultHeaders(authArgs.request, authArgs.auth);
		const res = await getCategories({
			headers,
		});
		return data({ categories: res.data });
	});
}

If I don't do the hack mentioned above, I'll have to manually refresh the page to get any data, as HMR do not work. another issue with that is I lose my type support and have to assign it manualy.

[yetty]

@kupras06 This doesn’t look related to authkit-react-router specifically — it’s more of a general React Router workflow issue.

What you’re running into is that HMR doesn’t re-hydrate loader data automatically. You typically need one of two approaches:

• Hydration fallback
• Server-side data loading

React Router’s docs cover this pattern here: https://reactrouter.com/start/framework/data-loading#client-data-loading

[DennisKraaijeveld]

Well, I have dived into it @yetty And there is actually a double nesting bug in the package which can cause this. In my case all client side navigations stopped working because of it.

I forked the repo to work on a fix. Logs do show this on navigation and hot reload:

DataWithResponseInit {
    type: 'DataWithResponseInit',
    data: {
      type: 'DataWithResponseInit',  // ← SHOULD NOT BE HERE!
      data: {                          // ← actual data is nested TOO DEEP

[chaance]

@DennisKraaijeveld Can you try updating to v0.10.0 and let me know if the issue persists? I'd love to help get you off of the fork if possible!