Type error: 'property does not exist on type' when it in fact does exist

I'm getting an error during the build process (Vercel) with product that's passed into CartItem.tsx even though it's declared in types.tsx.

The error:

Type error: Property 'imageUrl' does not exist on type 'Product'.
  43 |       <div className="flex items-center">
  44 |         <Image
> 45 |           src={product.imageUrl}
     |                        ^
  46 |           alt={product.itemName}
  47 |           width={100}
  48 |           height={100}

CartItem.tsx:

import { Product } from "types/types";
import Image from "next/image";

export default function CartItem({ product }: { product: Product }) {
/* ... */

  return (
      <div className="flex items-center">
        <Image
          src={product.imageUrl}
          alt={product.itemName}
          width={100}
          height={100}
          className="h-10 w-10 rounded-full mr-4 object-cover"
        />
       {* ... *}
      </div>
  );
}

types.tsx:

/* ... */
export type Product = {
  id: number;
  restaurantId: number;
  itemName: string;
  restaurantName: string;
  imageUrl: string;
  // title: string;
  description: string;
  price: number;
  // discountPercentage: number;
  // rating: number;
  // stock: number;
  // brand: string;
  // category: string;
  // thumbnail: string;
  // images: string[];
  quantity?: number;
};

Based on the code you've written there it should work. I would try moving your type definition to the same file as CartItem temporarily to see if that resolves the problem - if it does then there must be a problem with how your type is imported.

Also a side note: you can use the type React.FC to more cleanly type components.

type CartItemTwoProps = { product: Product };

const CartItemTwo: React.FC<CartItemTwoProps> = ({ product }) => {
    return (
      product.imageUrl // works
  );
}

TS Playground