Issue

I’m trying to upgrade a Next.js v.13 /pages directory project to a /app directory. Both projects are using the latest packages and doing exactly what I did in the other project, but for some reason when I send the props in the map loop of /app directory project.

I am using a type generated using the Supabase CLI.

components/card.tsx

// products table row type
        line: {
          Category ID: Number | Null
          Description: String | Null
          Featured In: Number | Null
          identification number
          Name: String | Null
          Preview: String | Null
          Price: Number | Null
          sales: boolean | null
          sale_price: number | null
          Sales Text: String | Null
          Stock: Count | Null
        }

// no errors on this page
export default function OverviewCard(props: Product): JSX.Element {}
 

components/products.tsx

 'Use client'

  Export default function OverviewProducts(): JSX.Element {
    // products fetched using @tanstack/react-query

    return (
      

        {product && (
          <>
            {product
              .map((product, i) => (
                
                // ☝️ error occurs here
              ))}
          
        )}
      
    )
 

I got this error not seen in other projects. I did the exact same thing, even though I was using the /app directory.

‘{key:number;}’ does not have the following properties from the type
‘{ Category ID: Number | Null; Description: String | Null;
Featured In: Number | Null; ID Number; Name: String | Null; Preview:
String | Null; Price: Number | Null; Sales: Boolean | Null; Sales Price:
Number | Null; Sales Text: String | Null; Inventory: Number | Null;
category_id, description, featured_in, id and 7 others.

You can also click the hover helper button Quick Fix... (Ctrl+.) in VSCode to find all “missing attributes” that are all values ​​of Product type.

// products fetched using @tanstack/react-query