return type of useLoaderData is missing properties.

[MoSattler]

What version of Remix are you using?

2.0.0

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

export const loader = () => {
  return json({
    willBeForgotten: { name: "forgotten" },
    willBeRemembered: { anythingButName: "remembered" },
  });
};

export default function Index() {
  // TYPEERROR: Property 'willBeForgotten' does not exist on type 'JsonifyObject<{ willBeRemembered: string }>'
  const { willBeForgotten, willBeRemembered } = useLoaderData<typeof loader>();
  return <div />
}

Expected Behavior

When returning an object from the loader in the shape of { name: string}, typescript passes. Both fields (willBeForgotten and willBeRemembered) are being returned from useLoaderData.

Actual Behavior

willBeForgotten is not returned from useLoaderData

[pcattori]

This looks like a bug in type-fest, which is what Remix is using under-the-hood: https://tsplay.dev/wgK54w

[MichaelDeBoey]

Duplicate of #7246

[MoSattler]

Hi @MichaelDeBoey,

Thank you for taking the time to review this. While I see the similarity in the overarching theme of type issues, I was wondering if we are sure that this is a duplicate of #7246.

Issue #7246 appears to concern types disappearing when set to any, as in Record<string, any>. However, my issue seems specific to objects that have a single key called name, like { name: "something" }. These are not being returned as expected from useLoaderData.

[MichaelDeBoey]

@MoSattler I did some further investigation on this some time ago and posted in the type-fest issue my findings: sindresorhus/type-fest#667 (comment)

[kevinbailey25]

@MoSattler we are also having the same issue. Anytime we have an object with a single key called name... in our case tenant: { name: 'tenant name', address: {...} }

Seems like they've got an issue for it in type-fest: sindresorhus/type-fest#657

[kevinbailey25]

@MoSattler I went down WAY TOO many rabbit holes and have a temp solution until that issue gets fixed...

The issue is any object that has a name property and all other properties can be optional (aka undefined), it will assume it's a function and strip it out.

We have a tenant object that has a name: string then several other fields that all happen to be string | undefined. As long as we add an extra prop that isn't undefined, like json({ tenant: { ...tenant, fix: true }}) it will work. Very annoying, but until that issue (sindresorhus/type-fest#657) gets fixed... ya

[MoSattler]

Thank you for the clarification @MichaelDeBoey

[MoSattler]

@kevinbailey25 Oh wow! Quite the tricky bug. Really nice find though. Thanks for sharing!

[dperetti]

Still happening in Remix 2.4.1

[kiliman]

This is one of the main reasons I created remix-typedjson. Too many weird edge cases with the JSON type conversion.

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