Experiencing the same issues.

i generally have to do return json<Result>(...) to get types to work right

It's one of the reasons I created remix-typedjson. It exposes the native TypeScript types and converts the JSON data back to native types automatically.

https://github.com/kiliman/remix-typedjson

@kiliman great that you've created the repo, I'll check it out.

But I think this is a core Remix issue, isn't it?

@iampeter I think any framework that serializes to JSON from server to client will have this issue. I believe once Remix supports RSC, they'll be able to stream native types to the client, and this will no longer be an issue.

@iampeter I think any framework that serializes to JSON from server to client will have this issue. I believe once Remix supports RSC, they'll be able to stream native types to the client, and this will no longer be an issue.

we are not talking about serialization of types, but about what type useLoaderData returns.

it works correctly

type ExtractGeneric<Type> = Type extends TypedResponse<infer X> ? X : never
export function useDataFromLoader<T extends LoaderFunction>() {
  return useLoaderData() as ExtractGeneric<Awaited<ReturnType<T>>>
}

playground

I've noticed a related issue

declare const x: JsonifyObject<{
  foo: unknown;
}>;

// foo?: unknown
x.foo

x.foo turned optional for some reason. It doesn't happen for something like string for instance.

declare const x: JsonifyObject<{
  foo: string;
}>;

// foo: string
x.foo

I'd like to drop an explanation why this happens for those that don't understand. It might help working around or fixing the issue.

While you can return any expression from a loader, when its transported as JSON, many values get converted to string or removed, because they are not supported by JSON. In order to address it, the type JsonifyObject has been created, that maps the returned type to what you would receive on the client side.

Here a demo of the issue: TS Playground

@ananevam you've mentioned, that the type comes from useLoaderData:
The data comes from your loader, the type is inferred from what your loader returns via the useLoaderData type. This is why you pass typeof loader as generic to your useLoaderData. The problem starts at the server, where the data is serialized. If remix did not map the type to reflect JSON.stringify behavior, you would see and expect incorrect types on the client side.

So there are currently a couple of ways to solve the issue (they are all not optimal).

1. Prevent returning any types, like undefined, that are expected in your components from loader, because they get changed
2. Widen types in your components to null | undefined
3. Use a data transformer, like for example the one provided by @kiliman

As @kiliman mentioned, in the next BIG remix update we will be able to transfer data more complex than simple JSON and you won't have the issue.

But meanwhile... We need to bite the dust. I'm also experience the issue and its annoying.

@Magellol I can explain, why unknown gets modified this way. Because unknown includes undefined and when you JSON.stringify it, it would disappear.