Next.js Discord

Discord Forum

Type error in a dynamic page when building

Answered
`${ViNoS}` posted this in #help-forum
Open in Discord
Avatar
`${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

Avatar
Marchy
What's the type def for ProductDetailedProps
Avatar
`${ViNoS}`OP
ps: the file that contains the error is the built file
basically a combination of 3 types :
export type ProductDetailedProps = ProductCardProps & {
  images: string[];
  buyCount: number;
  numOfItems: number;
  rating: number;
  details: string;
  reviews: CustomersReviewsProps[];
};
Avatar
Marchy
what about ProductCardProps, wherever product is defined
Avatar
`${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
Avatar
Marchy
I don't see product defined anywhere?
Avatar
`${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"),
};
Avatar
Rafael Almeida
this error message probably means the component you are exporting as the page is receiving props that are impossible to exist. how does your component signature looks like?
Avatar
`${ViNoS}`OP
i see, that makes sense when reading the error,
excuse me though, but what is a signature ?
Avatar
Rafael Almeida
the type of the component
Avatar
`${ViNoS}`OP
is it the type ?
oh okay
i have no props
it works fine now , thank you so much for your time @Rafael Almeida@Marchy
Avatar
`${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
Avatar
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
Avatar
`${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