Only plain objects can be passed to Client Components from Server Components. Decimal objects not | Next.js | Page 1

sick umbra Oct 14, 2024, 6:18 PM

#

📎 message.txt

lean abyssBOT Oct 14, 2024, 6:18 PM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

sick umbra Oct 14, 2024, 6:22 PM

#

I have a products form where i can edit or add a new product.

When I want to go a single product page to edit it, i get this warning in console:

  {id: ..., storeId: ..., categoryId: ..., name: ..., price: Decimal, isFeatured: ..., isArchived: ..., sizeId: ..., colorId: ..., createdAt: ..., updatedAt: ..., images: ...}```

#

Product page is:

import ProductsForm from "@/components/products-form";
import {
  getCategories,
  getColors,
  getProductWithOnlyImagesRelation,
  getSizes,
} from "@/server/data-access-layer";

export default async function ProductPage({
  params,
}: {
  params: { productId: string; storeId: string };
}) {
  const product = await getProductWithOnlyImagesRelation(params.productId);

  const formattedProduct = {
    ...product,
    price: product?.price.toNumber(),
  };

  const categories = await getCategories(params.storeId);

  const sizes = await getSizes(params.storeId);

  const colors = await getColors(params.storeId);
  return (
    <div className="flex-col">
      <div className="flex-1 space-y-4 p-8 pt-6">
        <ProductsForm
          categories={categories}
          colors={colors}
          sizes={sizes}
          initialData={formattedProduct}
        />
      </div>
    </div>
  );
}

#

Is there a better way than formatting the product and attaching it in the initialData prop instead of the normal product?

#

If I use formattedProduct instead, I get this from initial data prop:

#

  Type '{ price: number | undefined; images?: { id: string; productId: string; url: string; createdAt: Date; updatedAt: Date; }[] | undefined; id?: string | undefined; storeId?: string | undefined; ... 7 more ...; updatedAt?: Date | undefined; }' is not assignable to type '{ id: string; storeId: string; categoryId: string; name: string; price: Decimal; isFeatured: boolean; isArchived: boolean; sizeId: string; colorId: string; createdAt: Date; updatedAt: Date; }'.
    Types of property 'id' are incompatible.
      Type 'string | undefined' is not assignable to type 'string'.
        Type 'undefined' is not assignable to type 'string'.ts(2322)
types.ts(169, 3): The expected type comes from property 'initialData' which is declared here on type 'IntrinsicAttributes & ProductFormProps'```

sick umbra Oct 15, 2024, 11:25 AM

#

bump

sick umbra Oct 16, 2024, 11:46 AM

#

bump

sick umbra Oct 17, 2024, 4:23 PM

#

bump

sick umbra Oct 18, 2024, 11:32 AM

#

bump

sick umbra Oct 19, 2024, 9:17 AM

#

bump

sick umbra Oct 21, 2024, 12:52 PM

#

bump

safe nymph Oct 21, 2024, 3:45 PM

#

wow props for following the rules ngl

#

cant you just use Numbers instead of.. Decimal?

#

Or if you need to use Decimal, the issue is that Decimals cant be serialized in js atm

#

so pass it as a string to the client component
decimalValue.toString()

#

then you can convert back like this
const decimal = new Decimal(decimalAsString);

#

@sick umbra

sick umbra Oct 21, 2024, 5:04 PM

#

safe nymph Or if you need to use Decimal, the issue is that Decimals cant be serialized in ...

yes i know, hence why i formatted my product to number

#

import ProductsForm from "@/components/products-form";
import {
  getCategories,
  getColors,
  getProductWithOnlyImagesRelation,
  getSizes,
} from "@/server/data-access-layer";

export default async function ProductPage({
  params,
}: {
  params: { productId: string; storeId: string };
}) {
  const product = await getProductWithOnlyImagesRelation(params.productId);

  const formattedProduct = {
    ...product,
    price: product?.price.toNumber(),
  };

  const categories = await getCategories(params.storeId);

  const sizes = await getSizes(params.storeId);

  const colors = await getColors(params.storeId);
  return (
    <div className="flex-col">
      <div className="flex-1 space-y-4 p-8 pt-6">
        <ProductsForm
          categories={categories}
          colors={colors}
          sizes={sizes}
          initialData={formattedProduct}
        />
      </div>
    </div>
  );
}

safe nymph Oct 21, 2024, 5:04 PM

#

oh

sick umbra Oct 21, 2024, 5:05 PM

#

to number or can also do string as u said since those can be passed to client components

#

but

safe nymph Oct 21, 2024, 5:05 PM

#

Warning: Only plain objects can be passed to Client Components from Server Components. Decimal objects are not supported.

You dont see this anymore then right?

sick umbra Oct 21, 2024, 5:05 PM

#

yes i have problem with the types now

#

if i hover over initialData prop

#

Type '{ price: number | undefined; images?: { id: string; productId: string; url: string; createdAt: Date; updatedAt: Date; }[] | undefined; id?: string | undefined; storeId?: string | undefined; ... 7 more ...; updatedAt?: Date | undefined; }' is not assignable to type '{ id: string; storeId: string; categoryId: string; name: string; price: Decimal; isFeatured: boolean; isArchived: boolean; sizeId: string; colorId: string; createdAt: Date; updatedAt: Date; } & { ...; }'.
Type '{ price: number | undefined; images?: { id: string; productId: string; url: string; createdAt: Date; updatedAt: Date; }[] | undefined; id?: string | undefined; storeId?: string | undefined; ... 7 more ...; updatedAt?: Date | undefined; }' is not assignable to type '{ id: string; storeId: string; categoryId: string; name: string; price: Decimal; isFeatured: boolean; isArchived: boolean; sizeId: string; colorId: string; createdAt: Date; updatedAt: Date; }'.
Types of property 'id' are incompatible.
Type 'string | undefined' is not assignable to type 'string'.
Type 'undefined' is not assignable to type 'string'.ts(2322)
types.ts(169, 3): The expected type comes from property 'initialData' which is declared here on type 'IntrinsicAttributes & ProductFormProps'

#

and if i hover over initial data, it will show like this:

safe nymph Oct 21, 2024, 5:06 PM

#

show me <ProductsForm>

sick umbra Oct 21, 2024, 5:06 PM

#

(property) initialData: ({
id: string;
storeId: string;
categoryId: string;
name: string;
price: Decimal;
isFeatured: boolean;
isArchived: boolean;
sizeId: string;
colorId: string;
createdAt: Date;
updatedAt: Date;
} & {
...;
}) | null

#

📎 message.txt

#

this is Products form

#

types are:

#

export type ProductFormProps = {
  initialData: (Product & { images: Image[] }) | null;
  categories: Category[];
  colors: Color[];
  sizes: Size[];
};

#

and my product model

#

model Product {
  id String @id @default (uuid())
  storeId String
  store Store @relation("StoreToProduct", fields: [storeId], references: [id])
  categoryId String
  category Category @relation("CategoryToProduct", fields: [categoryId], references: [id])
  name String
  price Decimal
  isFeatured Boolean @default(false)
  isArchived Boolean @default(false)
  sizeId String
  size Size @relation(fields: [sizeId],references: [id])
  colorId String
  color Color @relation(fields: [colorId], references: [id])
  images Image[]
  orderItems OrderItem[]
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  @@index([storeId])
  @@index([categoryId])
  @@index([sizeId])
  @@index([colorId])
}

safe nymph Oct 21, 2024, 5:08 PM

#

chill

#

lol

sick umbra Oct 21, 2024, 5:08 PM

#

in case ur next questions would be how props look lol

safe nymph Oct 21, 2024, 5:08 PM

#

its an easy fix, so basically

#

const product = await getProductWithOnlyImagesRelation(params.productId);

#

hover over product

#

and tell me what you see for the type of id

sick umbra Oct 21, 2024, 5:09 PM

#

string

#

or u mean type of price?

safe nymph Oct 21, 2024, 5:09 PM

#

just string or string | undefined

sick umbra Oct 21, 2024, 5:09 PM

#

just string

#

const product: ({
images: {
id: string;
productId: string;
url: string;
createdAt: Date;
updatedAt: Date;
}[];
} & {
id: string;
storeId: string;
categoryId: string;
name: string;
price: Decimal;
isFeatured: boolean;
isArchived: boolean;
sizeId: string;
colorId: string;
createdAt: Date;
updatedAt: Date;
}) | null

#

thats how it looks

safe nymph Oct 21, 2024, 5:09 PM

#

createdAt: Date; updatedAt: Date; }'.
Types of property 'id' are incompatible.
Type 'string | undefined' is not assignable to type 'string'.
Type 'undefined' is not assignable to type 'string'.ts(2322)

#

one of your ids are undefined

#

real quick, paste this

#

  const formattedProduct = {
    ...product,
    id: product?.id ?? "",
    price: product?.price.toNumber(),
  };

sick umbra Oct 21, 2024, 5:11 PM

#

now it continues to the next one

#

Types of property 'storeId' are incompatible.
Type 'string | undefined' is not assignable to type 'string'.
Type 'undefined' is not assignable to type 'string'.ts(2322)

safe nymph Oct 21, 2024, 5:11 PM

#

but see the issue now?

#

cause like

#

product

#

can be null

#

got that right @sick umbra

sick umbra Oct 21, 2024, 5:13 PM

#

yes

safe nymph Oct 21, 2024, 5:13 PM

#

now null isnt an object, it dosent have properties. hence why null.id is undefined
you need to add a like checker for it.

sick umbra Oct 21, 2024, 5:13 PM

#

if there is initial data then it will use initial data

#

but it can be null

safe nymph Oct 21, 2024, 5:14 PM

#

mhm

sick umbra Oct 21, 2024, 5:14 PM

#

safe nymph now null isnt an object, it dosent have properties. hence why null.id is undefin...

so basically ur saying to format all the fields

safe nymph Oct 21, 2024, 5:14 PM

#

yes.

sick umbra Oct 21, 2024, 5:14 PM

#

like i have price/id, but do for all

safe nymph Oct 21, 2024, 5:14 PM

#

yes.

#

id: product?.id ?? "",

#

if the id exists, its gonna use it.. if its undefined.. it will use ""

sick umbra Oct 21, 2024, 5:14 PM

#

ok, let me do this and get back to u

safe nymph Oct 21, 2024, 5:14 PM

#

sure

#

this is why we love typescript ❤️

sick umbra Oct 21, 2024, 5:22 PM

#

@safe nymph ok now i got this

#

Types of property 'price' are incompatible.
Type 'number' is not assignable to type 'Decimal'.ts(2322)

#

const formattedProduct = {
...product,
id: product?.id ?? "",
storeId: product?.storeId ?? "",
categoryId: product?.categoryId ?? "",
name: product?.name ?? "",
price: product?.price.toNumber() ?? 0,
};

safe nymph Oct 21, 2024, 5:22 PM

#

price: Decimal;

#

price: product?.price.toNumber(),

#

see the issue? :D

sick umbra Oct 21, 2024, 5:24 PM

#

if im understanding right, im passing a number, but my product form props are using the ProductFormProps types

#

and initial data type is made of Product model which has price: decimal

#

so im not sure to go around this, since i want to keep decimal in my model

safe nymph Oct 21, 2024, 5:25 PM

#

make initial data accept a Number

#

then convert it back to Decimal

#

once you are in the client component

sick umbra Oct 21, 2024, 5:30 PM

#

initialData: (Product & { images: Image[] }) | null;

#

@safe nymph u mean this one right?

#

and instead of "Product" ill just write the fields myself

#

and have the price be number not decimal

safe nymph Oct 21, 2024, 5:31 PM

#

yea

sick umbra Oct 21, 2024, 5:44 PM

#

@safe nymph when it comes to type Date

#

what would the empty value be here?

#

as in, for strings its ""

#

but what is it for a Date type?

#

new Date(0) to set it to unix epoch or new Date() ?

safe nymph Oct 21, 2024, 6:08 PM

#

Set Dates to strings by .getTime()

#

It will return back in ms

#

As a string

sick umbra Oct 21, 2024, 7:08 PM

#

@safe nymph like this? createdAt: product?.createdAt.getTime().toString() ?? "",

#

because they will still be incompatible

sick umbra Oct 21, 2024, 10:54 PM

#

actually found much easier way:D instead of accounting for all the variables, i just conditionally format my product only if i already have some data in it

#

const formattedProduct = product
    ? {
        ...product,
        price: product?.price.toNumber() ?? 0,
      }
    : null;

#

thanks for all ur help nonetheless

safe nymph Oct 22, 2024, 1:58 AM

#

Sure, make your types as needed

#Only plain objects can be passed to Client Components from Server Components. Decimal objects not