Cart delete button not working

[chrisatcdm]

I see this was mentioned in #971, but there is no open issue.

Has there been any luck with the next.js team?

[manovotny]

@chrisatcdm appreciate you opening an issue for it officially. We're still working with the Next.js team on it.

[microdotmatrix]

Not sure if this is best practice, but changing the route handler method to PATCH fixes this issue.

I had been pulling my hair out for two straight days over this one, had reworked the whole thing with both Apollo Client and React Query to handle mutations... started from scratch again when they released 13.4.2 to see if the update might have patched the issue, when it didn't I just tried using a different request method, and bam. Fixed. Hope this helps... again, not sure if this is the right way to fix this issue, still learning a lot when it comes to API methods and web standards. I've run it in development mode and built to production and get the desired result; though when running Turbopack, it takes a manual refresh to see the item removed from the cart (HMR issue?).

[leerob]

I'm a bit confused, it seems to me the delete button is working in production right now – what am I missing? 🙏

[microdotmatrix]

I was confused by this as well... it's working fine on the demo you've got live on Vercel, but in my experience, when you clone the repo and run it locally, the delete function throws an error. Adding a line item to the cart works fine, and updating works fine - if you have 2+ units of an item in the cart, you can hit the decrement button and reduce the quantity without issue (using the PUT method in the route handler), but when the quantity reaches zero it switches to the DELETE method and throws an error. Naturally, the button to simply remove the line item throws the same error, using the same method in the route handler.

I'm not sure why this function works fine in the live demo, if its running the same code as the repo... I've loaded it on both Windows and Linux, Node 16 and 18, get the same error - specifically, the "Unexpected end to JSON data" error many of us found so endearing with the first 13.3 release.

Switching the method to PATCH does fix it though. I submitted a PR for this... but again, I'm not 100% this is the right way to fix it, or just a.... ahem... patch.

[stefansdev]

@leerob Just experienced this issue.

According to the HTTP specification DELETE method should not contain body.

I just created /api/cart/remove/route.ts that accepts POST method request and problem solved.

[fetimo]

Someone mentioned in another thread that, according to the HTTP spec, DELETE should not have a body and Next.js must've done some work to become spec-compliant. This seems to work:

export async function DELETE(req: NextRequest): Promise<Response> {
  const lineId = new URL(req.url).searchParams.get("lineId");
  const cartId = cookies().get("cartId")?.value;

  if (!cartId || !lineId) {
    return NextResponse.json(
      { error: "Missing cartId or lineId" },
      { status: 400 }
    );
  }
  try {
    const updatedCart = await removeFromCart(cartId, [lineId]);
    return NextResponse.json(updatedCart, { status: 200 });
  } catch (e) {
    if (isShopifyError(e)) {
      return NextResponse.json(
        { message: formatErrorMessage(e.message) },
        { status: e.status }
      );
    }

    return NextResponse.json({ status: 500 });
  }
}