Next.js Discord

Discord Forum

Type error in a dynamic page when building

Answered
`${ViNoS}` posted this in #help-forum
Open in Discord
`${ViNoS}`OP
when i try to build i get this error:
Type error: Type 'OmitWithTag<typeof import("absolute/path/[to]/page"), "metadata" | "default" | "config" | "generateStaticParams" | "revalidate" | ... 5 more ... | "generateMetadata", "">' does not satisfy the constraint '{ [x: string]: 
never; }'.
  Property 'product' is incompatible with index signature.
    Type 'ProductDetailedProps' is not assignable to type 'never'.

   6 | 
   7 | // Check that the entry is a valid entry
>  8 | checkFields<Diff<{
     |             ^
   9 |   default: Function
  10 |   config?: {}
  11 |   generateStaticParams?: Function

and I have no generateStaticParams on the page
Answered by `${ViNoS}`
on one of the components that the page was using I replaced :
(props: ProductDetailedProps)

with
({ product }: { product: ProductDetailedProps })

means I also changes the way i call the componant from : 
<Component {...product} />

to 
<Component product={product} />
View full answer

17 Replies

Marchy
What's the type def for ProductDetailedProps
@Marchy What's the type def for `ProductDetailedProps`
`${ViNoS}`OP
basically a combination of 3 types :
export type ProductDetailedProps = ProductCardProps & {
  images: string[];
  buyCount: number;
  numOfItems: number;
  rating: number;
  details: string;
  reviews: CustomersReviewsProps[];
};
Marchy
what about ProductCardProps, wherever product is defined
@Marchy what about `ProductCardProps`, wherever product is defined
`${ViNoS}`OP
export type ProductCardProps = {
  image: string;
  category: string;
  name: string;
  descreption: string;
  price: string;
  id: string;
  oldPrice?: string;
  tag?: { color: string; text: string };
};

agan, it works fine with no error on developement
Marchy
I don't see product defined anywhere?
`${ViNoS}`OP
const product: ProductDetailedProps = {
  id: "1",
  category: "cat",
  name: "name",
  descreption: "desc",
  image: "/phone.png",
  price: "25000",
  buyCount: 250,
  numOfItems: 18,
  rating: 3.6,
  details: "<h1>that's a really good product, believe me</h1>",
  reviews: [
    {
      name: "name",
      position: "",
      profilePicture: "/profile_pic.png",
      rating: 3.6,
      review:
        "review"
  ],
   images: new Array(5).fill("/phone.png"),
};
Rafael Almeida
the type of the component
`${ViNoS}`OP
is it the type ?
i have no props
it works fine now , thank you so much for your time @Rafael Almeida@Marchy
`${ViNoS}`OP
on one of the components that the page was using I replaced :
(props: ProductDetailedProps)

with
({ product }: { product: ProductDetailedProps })

means I also changes the way i call the componant from : 
<Component {...product} />

to 
<Component product={product} />
Answer
Rafael Almeida
glad you solved it, but its a bit weird this error was showing up for a nested component 🤔 only the page component should throw this error
@Rafael Almeida glad you solved it, but its a bit weird this error was showing up for a nested component 🤔 only the page component should throw this error
`${ViNoS}`OP
yeah , that what confused me, since the type mentioned in the error included propeties like config and generateStaticParams
still at the same time on the bottom it mentioned that type incompability with ProductDetailedProps