Prisma.JsonValue typescript bug after updating to 1.17.0

[dT-Nick]

What version of Remix are you using?

1.17.0

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

• Yes

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.

[dT-Nick]

As a work around to stop the typescript error, I'm having to do the following:

import type { Example } from '@prisma/client'

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

This sets the type of example.json to Prisma.JsonValue instead of the deconstructed type of Prisma.JsonValue, which seems to show:

string | number | boolean | {
        [x: string]: string | number | boolean | ... | (string | number | boolean | {
            ...;
        } | (string | ... 4 more ... | null)[] | null)[] | null;
    } | (string | ... 4 more ... | null)[] | null;

EDIT: I understand that the Prisma.JsonValue type is excessively deep and possibly infinite (self referencing), just don't understand why the typescript error appears now and didn't in previous versions of Remix.

[pcattori]

Unable to reproduce. Types are simplified (or in your words, "deconstructed"), but that's by design. But I do not get any warnings or errors about infinite type instantiation neither in my editor nor when running tsc to typecheck.

[dT-Nick]

Added some screenshots of both the error using similar code to you and the output of tsc.

Using typescript 5.1.3.

[dT-Nick]

Added another screenshot of it after downgrading to 1.16.1. Also no output from tsc.

[DerJacques]

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>
  )
}

[pcattori]

Can you reproduce within a Typescript playground? Or provide details on what the Example type looks like?

[dT-Nick]

Can you reproduce within a Typescript playground? Or provide details on what the Example type looks like?

Example type doesn't seem to matter. Literally did the same as you in my above screenshots (this comment) with:

const examples = {} as Prisma.JsonValue[]

And I'm still getting the same issue. I'll have a look and see if I can reproduce within a ts playground.

[pcattori]

Here's an example of recursive types working correctly with useLoaderData inference:

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgKwM4QHZwL5wGZQQhwBEAAlAKYjAAeAtFAK4YD0GEAJpSQFCiRYiOE1SUAMhACG3KABEpMKTnyFi5KjQbM2VKQGMYfXgBtK8E9NlwAvHAAUASlsA+RLzie4Z+FFuJcKVQ4ACVKfSYoMQ8vKhhIrDRMeyQ-bEdebF5ePBZDYEw4AGEiSAxKDBgndy9vc2E0-1EJK0p5RSkAHhgATzBKCDxvVqgXJxjPHzhuVH0KzilK-ygAfgA6fQALYBNOda2dvY3t3czs3v7Q8MixfwQJuGBOAC44VBgoYAwAcweD3ZWrzCESilDO2VYrDgMG2wWAwQA7ptFCIxJIZG0FEpphBKMEWLJ6DDKPRNhAuNCIG8BCZgHgetC+njeBdKHAAApxXqdAAqbjsSAA2gBpR5YADWlB6gzgPIAuq8eSK5bgAGQBFlMuAAZRpdOAlE4-k55m5wJulBcvEhXgAeisgA

So not sure why it wouldn't work for Prisma's types 🤷

[dT-Nick]

That's the even weirder thing, even though when hovering over the types they look identical (and probably are) in 1.16.1 & 1.17.0. The error only seems to show when using 1.17.0. 😕

[DerJacques]

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.

[pcattori]

Still not able to reproduce in Typescript playground

import { json } from '@remix-run/node'
import { useLoaderData } from '@remix-run/react'

interface JsonArray extends Array<JsonValue> {}
type JsonValue = string | number | boolean | JsonObject | JsonArray | null
type JsonObject = { [Key in string]?: JsonValue }

interface Example {
  id: string
  json: JsonValue
}

export async function loader() {
  const examples: Example[] = []

  return json({ examples })
}

export default function RouteComponent() {
  const loaderData = useLoaderData<typeof loader>()

  let ids = loaderData.examples.map((example) => example.id)
  //  ^? let ids: string[]
}

[dT-Nick]

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]

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

[DerJacques]

Thanks for the great repro-case, @dT-Nick! Just wanted to add that I re-used an old sandbox, so that's why the TS version was 4.x. Locally we're using 5.0.4. Very strange that sometimes looping is the issue, while other times accessing the attribute directly is the issue.

[dT-Nick]

Thanks for the great repro-case, @dT-Nick! Just wanted to add that I re-used an old sandbox, so that's why the TS version was 4.x. Locally we're using 5.0.4. Very strange that sometimes looping is the issue, while other times accessing the attribute directly is the issue.

Yeah looks like 5.0.4 and 4.9.5 have the error when looping, but 5.1.3 has the error when accessing it directly. 🤷

[pcattori]

Got a prototype for the fix in this playground

[lukasa1993]

Got a prototype for the fix in this playground

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

[pcattori]

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

[lukasa1993]

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

works

[DerJacques]

Thank you very much, @pcattori! Really appreciate your quick turnaround on this one :)

[MichaelDeBoey]

Fixed by #6582, which will be released in the next release

[github-actions]

🤖 Hello there,

We just published version v0.0.0-nightly-1de6ca4-20230613 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.17.1-pre.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!

[github-actions]

🤖 Hello there,

We just published version v0.0.0-nightly-ad9adee-20230615 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 v0.0.0-nightly-12440f3-20230616 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.0-pre.0 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.0 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!