Boundary between server and client | Effect with React 19: Project Template

This error is caused by how Post is defined:

src/services/schema.ts

export class Post extends Schema.Class<Post>("Post")({
  userId: Schema.Number,
  id: Schema.Number,
  title: Schema.String,
  body: Schema.String,
}) {
  static readonly Array = Schema.Array(this);
}

Crossing the boundary between server and client is similar to how a backend to frontend API works.

You cannot send classes between boundaries: data must be serialized before sending it to the client.

Primitive types, such as number or string, and plain objects can be sent directly to the client.

However, classes and data structures like Map or Set are not supported. Therefore, we need to manually serialize before sending them to the client.

That's where @effect/schema comes to the rescue!

This is a common issue when working with Effect and React 19. Many constructs in effect are based on class, it's important to pay attention to the data types you send to the client.