useApplyCartLinesChange API shows an error when used

Hey there, I’ve used this API in the past and when I am using this API today, it shows an error on the browser console.

I tried to debug and went through docs multiple times, but it seems like there’s some issue with the API because even the extension I built earlier, when I try it today on the dev server, it shows the same error which is odd because I made no change to it and it’s still working on production.

Here’s the code I am using:

await applyCartLinesChange({
        type: "addCartLine",
        merchandiseId: e, //e is the product variant ID
        quantity: 1,
      });

Here’s a screenshot of the error I am getting on my browser console:

API version on extension is: 2024-07

Quick update, after thinking it through, I thought it could be the API version, the project config, or something messed up my end which caused this issue so I went ahead, created a fresh project and fresh extension, the problem still continues.

Here’s the entire code from the new extension.

import {
  reactExtension,
  BlockStack,
  Button,
  useApplyCartLinesChange,
} from "@shopify/ui-extensions-react/checkout";

// 1. Choose an extension target
export default reactExtension("purchase.checkout.block.render", () => (
  <Extension />
));

function Extension() {
  const applyCartLinesChange = useApplyCartLinesChange();

  async function handleAddToCard() {
    console.log("Adding to the cart")
    await applyCartLinesChange({
      type: "addCartLine",
      quantity: 1,
      merchandiseId: "gid://shopify/ProductVariant/45352591458516"
    })
    console.log('added to the cart')
  }
  return (
    <BlockStack>
      Add the product to the cart from here
      <Button onPress={handleAddToCard}>Sample button</Button>
    </BlockStack>
  )
}

Have you made sure that the product/variant has available inventory available and also is published on the Online Store sales channel?

Yep, done that already, Luke!