Uncaught TypeError: Cannot read properties of undefined (reading 'addVariantToCart')

[muhzulzidan]

where to debug this particular code ? does any one know ?

i only change this productGrid to display something or not based on location

{ location.location.path==="/shop/" ? 
        allShopifyProduct.edges ? (
          allShopifyProduct.edges.map(
            ({
              node: {
                id,
                handle,
                title,
                images: [firstImage],
                variants: [firstVariant],
              },
            }) => (
              <div key={id}>
                <Link to={`/product/${handle}/`}>
                  <GatsbyImage
                    image={firstImage.gatsbyImageData}
                    alt={handle}
                  />
                </Link>
                <h2>{title}</h2>
                <p>{getPrice(firstVariant.price)}</p>
                {/* <ExchangeRate from='IDR' to='USD' value={`${firstVariant.price}`}/> */}

              </div>
            )
          )
        ) : (
          <p>No Products found!</p>
        ):
        <Carausels className="carauselsProductGrid">
          {allShopifyProduct.edges ? (
            allShopifyProduct.edges.map(
              ({
                node: {
                  id,
                  handle,
                  title,
                  images: [firstImage],
                  variants: [firstVariant],
                },
              }) => (
                <div key={id}>
                  <Link to={`/product/${handle}/`}>
                    <GatsbyImage
                      image={firstImage.gatsbyImageData}
                      alt={handle}
                    />
                  </Link>
                  <h2>{title}</h2>
                  <p>{getPrice(firstVariant.price)}</p>
                  {/* <ExchangeRate from='IDR' to='USD' value={`${firstVariant.price}`}/> */}

                </div>
              )
            )
          ) : (
            <p>No Products found!</p>
          )}