remix: Prisma.JsonValue typescript bug after updating to 1.17.0

What version of Remix are you using?

1.17.0

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

Steps to Reproduce

Have a prisma schema model that uses the type ‘Json’ like so:

model Example {
  json Json?
}

Get data from that model and return it from a loader, and use examples in the route component like so:

export async function loader({}: LoaderArgs) {
  const examples = await db.example.findMany()
  
  return json({ examples })
}

export default function RouteComponent() {
  const loaderData = useLoaderData<typeof loader>()
  
  return (
    <div>
      {JSON.stringify(loaderData.examples[0].json)}
    </div>
  )
}

Expected Behavior

Expecting the type of loaderData.examples[0].json to not cause a typescript error, like it didn’t before the 1.17.0 update - guessing this is something to do with the new way types are simplified by Serialize.

Actual Behavior

loaderData.examples[0].json has the following typescript error:

Type instantiation is excessively deep and possibly infinite. ts(2589)

Again this worked before 1.17.0, and when downgrading to 1.16.1 the error disappears.

About this issue

Original URL
State: closed
Created a year ago
Reactions: 2
Comments: 27 (13 by maintainers)

Most upvoted comments

can you share patch-package file for this fix i want to test it on my workflow, i get this error on 1.17 as well but using prisma includes instead of JSON wonder if it fixes that case too

I’ll put up a PR in a couple hours with this fix

pcattori on Jun 9, 2023

Here’s a reproduction in Typescript playground.

Updated some config settings to match my tsconfig & was able to reproduce the error when trying to access json directly - not when looping through the data like DerJacques.

EDIT: Same issue without updating the config.

dT-Nick on Jun 8, 2023

Got a prototype for the fix in this playground

pcattori on Jun 9, 2023

Noticed @DerJacques was using an older version of typescript and when using 4.x now the issue is there when looping, but not when accessing json directly, as he initially described. Weird! 😖

Link

dT-Nick on Jun 8, 2023

Here’s a sandbox that reproduces the error in the file app/routes/index.tsx 😃

https://codesandbox.io/p/sandbox/old-architecture-800jum?file=/app/routes/index.tsx

The types I created at the top are copy/pasted from the Prisma types.

DerJacques on Jun 8, 2023

We are seeing the same issue on our end. As soon as the data returned by Prisma returns a Json field, this error shows up.

Interestingly, we don’t see the issue when we try to access the data directly, but when we start looping over it, the TS error pops up:

export async function loader({}: LoaderArgs) {
  const examples = await db.example.findMany()
  
  return json({ examples })
}

export default function RouteComponent() {
  const loaderData = useLoaderData<typeof loader>()
  
  return (
    <div>
      {JSON.stringify(loaderData.examples[0].json)}  // We have seen this not cause issues
      {loaderData.examples.map(example => example.id)} // This one results in the error. `.json` doesn't even have to be accessed.
    </div>
  )
}

DerJacques on Jun 8, 2023