Typescript error when returning ZodError from loader or action

[pioluk]

What version of Remix are you using?

1.18.0

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

• Yes

Steps to Reproduce

Similar to #6558, but since 1.18.0 happens with ZodError.

Repro: TS Playground

Expected Behavior

No typescript error

Actual Behavior

Error: Type instantiation is excessively deep and possibly infinite.

[Jackardios]

I am getting the same error when trying to get recursive category from loader (since remix@1.18.0)

export interface Category {
  children?: Array<Category>;
}

export async function loader({ request, params, context }: LoaderArgs) {
  const category: Category = {...};
  return json({ category })
}

export default function Page() {
  const { category } = useLoaderData<typeof loader>();
  //       ^ Error: Type instantiation is excessively deep and possibly infinite.ts(2589)
}

[sergiodxa]

This happens because if the type is recursive and has no end it will be trying to convert it to JSON-compatible forever, it happens the same if you do:

let object = {}
object.key = object
JSON.stringify(object) // throws TypeError: Converting circular structure to JSON

I imagine ZodError has some circular dependency.

[Jackardios]

Is there a workaround for recursive types (without changing those types)?

[ivogt]

Many thanks for the Remix team and the great work on 1.18. However, I am also experiencing this with 50+ definitions for Salesforce commerce apis which prevents us upgrading to stable dev.

I am really hoping we can address that.

Thank you.

[daviddelusenet]

I'm running into this issue with types coming from the Shopify Hydrogen package.

[frontendphil]

FWIW, I'm running into a very similar issue. However, it only appears with V2_MetaArgs and not with useLoaderData. Has worked fine before. We also have a recursive type from a third-party library (name JSONContent from prose-mirror.

[AndKiel]

I've got the same issue with types generated from graphql queries via graphql-codegen because some types in my API are recursive.

const { results, variables } = useLoaderData<ILoaderData>();
//                             ^error TS2589: Type instantiation is excessively deep and possibly infinite.

An ugly workaround is to do this:

const { results, variables } = useLoaderData() as unknown as ILoaderData;

It stops complaining and we still have the typings, even though they are not SerializeFrom.

Worked fine on 1.17.1.

[github-actions]

🤖 Hello there,

We just published version 1.18.1-pre.2 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 1.18.1 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!