useLoaderData not working with defer on Remix v2

[remcolakens]

What is the location of your example repository?

No response

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

2023.10.0

What version of Remix are you using?

2.1.0

Steps to Reproduce

When upgrading my current project to the newest version of Hydrogen/Remix, I'm facing some Typescript issues with the useLoaderData behavior.

Let me show you some sample code where I'm getting the issue:

export async function loader({ context }: LoaderFunctionArgs) {
	const { storefront } = context;
	const customerAccessToken = await context.session.get('customerAccessToken');

	const { customer } = await storefront.query(CUSTOMER_QUERY, {
		variables: {
			customerAccessToken,
		},
		cache: storefront.CacheNone(),
	});

	//If the customer failed to load, we assume their access token is invalid.
	if (!customer) {
		throw await handleLogout(context);
	}

	return defer({
		customer,
	});
}

export default function Account() {
	const { customer } = useLoaderData<typeof loader>()
}

This code works fine, it's just TypeScript that is having issues as you can see in the screenshot below:

I found out changing the defer to json solves the error but this is not what I want.

Expected Behavior

Code compiles without Typescript errors

Actual Behavior

The TypeScript linter returns an error as shown in the screenshot above

[AdiRishi]

Just confirmed and reproduced this myself. The issue seems to be with the defer and json functions from @shopify/remix-oxygen.

It seems to think that the actual object is under data.data which is wrong.

[justinmetros]

Also confirming exact same issue.

You can repro the issue with the following:

1. npm create @shopify/hydrogen@latest
2. Paste this into a route:

import { useLoaderData } from '@remix-run/react';
import { defer } from '@shopify/remix-oxygen';

export const loader = async () => {
  return defer({ test: "test" });
};

export default function Index() {
  const data = useLoaderData<typeof loader>();

  return (
    <div>{data.test}</div>
  )
}

3. Observe type error:

Property 'test' does not exist on type 'JsonifyObject<Pick<DeferredData, "init"> & { data: { test: string; }; readonly [typedDeferredDataBrand]: "TypedDeferredData"; }>'.

[blittle]

I'm looking into this, and I think it's because @remix-run/server-runtime was not properly moved to be a peer dep of @shopify/remix-oxygen

[blittle]

This is now fixed with @shopify/remix-oxygen v2.0.1.

[blittle]

I apologize, but the fix also requires updating to @shopify/hydrogen@2023.10.2