Type 'string' is not assignable to type 'Date'."

[arefay]

I have a simple model which includes a
createdAt DateTime @default(now())
column, generating a SQLite db.

I'm using Remix.run to fetch some rows using a loader function and .findMany(), to then populate some objects, e.g.

type LoaderData = { project: Project; }

and convert to json using Remix.run's json function

return json(data);

This was all working fine until I updated npm, prisma all to latest and now all my React components show errors related to the "DateTime" column not being converted correctly?

Types of property 'createdAt' are incompatible.\n Type 'string' is not assignable to type 'Date'.",

Oddly I'm actually not getting any build errors using npm run dev, but i'm getting all the squiggly red lines on all my React components now where I'm trying to pass an object with a DateTime column from my prisma schema.

Has anyone come across this yet? Thanks!

[austincrim]

Hey @arefay 👋,

Could you provide a more complete code snippet so I can get the full picture?

[austincrim]

That helps! I think the underlying issue is that while the Prisma query returns a Date object, instances of Date cannot be serialized to JSON and passed from the backend to the frontend. On the frontend, the createdAt field will just be a plain string. If you need it to be an instance of Date, you will need to re-construct it on the frontend.

As an aside, you might be interested in a recent Remix release that improves the type-safety of the useLoaderData hook.

[oncet]

Having the exact same problem. Tried the approach suggested on v1.6.5 release changelog but same result.

I have a pretty simple Remix app which reproduces the error:

• https://github.com/oncet/blog/blob/master/app/routes/index.tsx#L39

Type 'SerializeObject<{ id: number; title: string; slug: string; image: string; body: string; categoryId: number | null; publishedAt: Date; createdAt: Date; }>' is not assignable to type 'Post'.
  Types of property 'publishedAt' are incompatible.
    Type 'string' is not assignable to type 'Date'.ts(2322)
PostCard.tsx(5, 3): The expected type comes from property 'post' which is declared here on type 'IntrinsicAttributes & PostCardProps & { children?: ReactNode; }'

[oncet]

Just found related issue:

• DateTime values wrongly typed in Prisma Client #12540

Seems to be the same problem.

I hadn't luck trying to cast the type to Date either:

post={{
  ...rest,
  publishedAt: post.publishedAt as unknown as Date,
}}

Also tried instantiating a new Date but same problem:

publishedAt: new Date(post.publishedAt)

[austincrim]

The underlying issue here is the same, Prisma returns Date's but they can't be serialized to JSON. Remix's types are helping here letting us know that what we expect to be a Date is actually a string after it comes across the network, denoted by the wrapping SerializeObject type:

The solution is to use something like superjson or reconstruct the dates on the client side. This worked for me:

<PostCard
  post={{
    ...post,
    publishedAt: new Date(post.publishedAt),
    createdAt: new Date(post.createdAt)
  }}
/>

[oncet]

I think I was probably missing the 2nd date attribute. Thank you so much!

[piotrkulpinski]

For anyone else having similar issues, setting the type as SerializeFrom<Type> fixed the problem with Date fields being incompatible.

const Post = ({ post }: { post: SerializeFrom<PostSelectMany> }) => {
  ...
  return null
}

[timrbula]

Thanks this worked great for me. I may have missed another place it was exported from but I imported SerializeFrom from @remix-run/server-runtime in case anyone is looking to use this solution.

[DonKoko]

This is great. I have been facing this issue a lot and this seems like the best/cleanest solution. Thank you @piotrkulpinski

[cyclonejet]

Just a note, SerailizeFrom is now available in @remix-run/node

Edit: typo below

[ThaddeusJiang]

typo: SerailizeForm -> SerializeFrom

import { SerializeFrom } from "@remix-run/node"