@shopify/cli 3.75.1 → 3.75.3

package/dist/assets/hydrogen/starter/CHANGELOG.md

@@ -1,5 +1,211 @@
 # skeleton
 
+## 2025.1.1
+
+### Patch Changes
+
+- Upgrade eslint to version 9 and unify eslint config across all packages (with the exception of the skeleton, which still keeps its own config) ([#2716](https://github.com/Shopify/hydrogen/pull/2716)) by [@liady](https://github.com/liady)
+
+- Bump remix version ([#2740](https://github.com/Shopify/hydrogen/pull/2740)) by [@wizardlyhel](https://github.com/wizardlyhel)
+
+- Turn on Remix `v3_singleFetch` future flag ([#2708](https://github.com/Shopify/hydrogen/pull/2708)) by [@wizardlyhel](https://github.com/wizardlyhel)
+
+  Remix single fetch migration quick guide: https://remix.run/docs/en/main/start/future-flags#v3_singlefetch
+  Remix single fetch migration guide: https://remix.run/docs/en/main/guides/single-fetch
+
+  **Note:** If you have any routes that appends (or looks for) a search param named `_data`, make sure to rename it to something else.
+
+  1. In your `vite.config.ts`, add the single fetch future flag.
+
+     ```diff
+     +  declare module "@remix-run/server-runtime" {
+     +    interface Future {
+     +     v3_singleFetch: true;
+     +    }
+     +  }
+
+       export default defineConfig({
+         plugins: [
+           hydrogen(),
+           oxygen(),
+           remix({
+             presets: [hydrogen.preset()],
+             future: {
+               v3_fetcherPersist: true,
+               v3_relativeSplatPath: true,
+               v3_throwAbortReason: true,
+               v3_lazyRouteDiscovery: true,
+     +         v3_singleFetch: true,
+             },
+           }),
+           tsconfigPaths(),
+         ],
+     ```
+
+  2. In your `entry.server.tsx`, add `nonce` to the `<RemixServer>`.
+
+     ```diff
+     const body = await renderToReadableStream(
+       <NonceProvider>
+         <RemixServer
+           context={remixContext}
+           url={request.url}
+     +     nonce={nonce}
+         />
+       </NonceProvider>,
+     ```
+
+  3. Update the `shouldRevalidate` function in `root.tsx`.
+
+     Defaulting to no revalidation for root loader data to improve performance. When using this feature, you risk your UI getting out of sync with your server. Use with caution. If you are uncomfortable with this optimization, update the `return false;` to `return defaultShouldRevalidate;` instead.
+
+     For more details see: https://remix.run/docs/en/main/route/should-revalidate
+
+     ```diff
+     export const shouldRevalidate: ShouldRevalidateFunction = ({
+       formMethod,
+       currentUrl,
+       nextUrl,
+     -  defaultShouldRevalidate,
+     }) => {
+       // revalidate when a mutation is performed e.g add to cart, login...
+       if (formMethod && formMethod !== 'GET') return true;
+
+       // revalidate when manually revalidating via useRevalidator
+       if (currentUrl.toString() === nextUrl.toString()) return true;
+
+     -  return defaultShouldRevalidate;
+     +  return false;
+     };
+     ```
+
+  4. Update `cart.tsx` to add a headers export and update to `data` import usage.
+
+     ```diff
+       import {
+     -  json,
+     +  data,
+         type LoaderFunctionArgs,
+         type ActionFunctionArgs,
+         type HeadersFunction
+       } from '@shopify/remix-oxygen';
+     + export const headers: HeadersFunction = ({actionHeaders}) => actionHeaders;
+
+       export async function action({request, context}: ActionFunctionArgs) {
+         ...
+     -   return json(
+     +   return data(
+           {
+             cart: cartResult,
+             errors,
+             warnings,
+             analytics: {
+               cartId,
+             },
+           },
+           {status, headers},
+         );
+       }
+
+       export async function loader({context}: LoaderFunctionArgs) {
+         const {cart} = context;
+     -    return json(await cart.get());
+     +    return await cart.get();
+       }
+     ```
+
+  5. Deprecate `json` and `defer` import usage from `@shopify/remix-oxygen`.
+
+     Remove `json()`/`defer()` in favor of raw objects.
+
+     Single Fetch supports JSON objects and Promises out of the box, so you can return the raw data from your loader/action functions:
+
+     ```diff
+     - import {json} from "@shopify/remix-oxygen";
+
+       export async function loader({}: LoaderFunctionArgs) {
+         let tasks = await fetchTasks();
+     -   return json(tasks);
+     +   return tasks;
+       }
+     ```
+
+     ```diff
+     - import {defer} from "@shopify/remix-oxygen";
+
+       export async function loader({}: LoaderFunctionArgs) {
+         let lazyStuff = fetchLazyStuff();
+         let tasks = await fetchTasks();
+     -   return defer({ tasks, lazyStuff });
+     +   return { tasks, lazyStuff };
+       }
+     ```
+
+     If you were using the second parameter of json/defer to set a custom status or headers on your response, you can continue doing so via the new data API:
+
+     ```diff
+     -  import {json} from "@shopify/remix-oxygen";
+     +  import {data, type HeadersFunction} from "@shopify/remix-oxygen";
+
+     +  /**
+     +   * If your loader or action is returning a response with headers,
+     +   * make sure to export a headers function that merges your headers
+     +   * on your route. Otherwise, your headers may be lost.
+     +   * Remix doc: https://remix.run/docs/en/main/route/headers
+     +   **/
+     +  export const headers: HeadersFunction = ({loaderHeaders}) => loaderHeaders;
+
+       export async function loader({}: LoaderFunctionArgs) {
+         let tasks = await fetchTasks();
+     -    return json(tasks, {
+     +    return data(tasks, {
+           headers: {
+             "Cache-Control": "public, max-age=604800"
+           }
+         });
+       }
+     ```
+
+  6. If you are using legacy customer account flow or multipass, there are a couple more files that requires updating:
+
+     In `root.tsx` and `routes/account.tsx`, add a `headers` export for `loaderHeaders`.
+
+     ```diff
+     + export const headers: HeadersFunction = ({loaderHeaders}) => loaderHeaders;
+     ```
+
+     In `routes/account_.register.tsx`, add a `headers` export for `actionHeaders`.
+
+     ```diff
+     + export const headers: HeadersFunction = ({actionHeaders}) => actionHeaders;
+     ```
+
+  7. If you are using multipass, in `routes/account_.login.multipass.tsx`
+
+     a. export a `headers` export
+
+     ```diff
+     + export const headers: HeadersFunction = ({actionHeaders}) => actionHeaders;
+     ```
+
+     b. Update all `json` response wrapper to `remixData`
+
+     ```diff
+     import {
+     - json,
+     + data as remixData,
+     } from '@shopify/remix-oxygen';
+
+     -  return json(
+     +  return remixData(
+         ...
+       );
+     ```
+
+- Updated dependencies [[`3af2e453`](https://github.com/Shopify/hydrogen/commit/3af2e4534eafe1467f70a35885a2fa2ef7724fa8), [`6bff6b62`](https://github.com/Shopify/hydrogen/commit/6bff6b6260af21b8025426c7031ab862dbecbc34), [`cd65685c`](https://github.com/Shopify/hydrogen/commit/cd65685c1036233faaead0330f25183900b102a7), [`8c717570`](https://github.com/Shopify/hydrogen/commit/8c7175701d9f4dd05d271ea46b6ab40d6e3210cb), [`4e81bd1b`](https://github.com/Shopify/hydrogen/commit/4e81bd1b0e99b5c760679b565d2f95c4fc15b934), [`3ea25820`](https://github.com/Shopify/hydrogen/commit/3ea25820b0b0094d982e481782e413165435cf00)]:
+  - @shopify/hydrogen@2025.1.1
+  - @shopify/remix-oxygen@2.0.11
+
 ## 2025.1.0
 
 ### Patch Changes

package/dist/assets/hydrogen/starter/app/components/CartMain.tsx

@@ -26,7 +26,7 @@ export function CartMain({layout, cart: originalCart}: CartMainProps) {
     cart &&
     Boolean(cart?.discountCodes?.filter((code) => code.applicable)?.length);
   const className = `cart-main ${withDiscount ? 'with-discount' : ''}`;
-  const cartHasItems = cart?.totalQuantity! > 0;
+  const cartHasItems = cart?.totalQuantity && cart?.totalQuantity > 0;
 
   return (
     <div className={className}>

package/dist/assets/hydrogen/starter/app/components/CartSummary.tsx

@@ -1,8 +1,8 @@
 import type {CartApiQueryFragment} from 'storefrontapi.generated';
 import type {CartLayout} from '~/components/CartMain';
 import {CartForm, Money, type OptimisticCart} from '@shopify/hydrogen';
-import { useRef } from 'react';
-import { FetcherWithComponents } from '@remix-run/react';
+import {useRef} from 'react';
+import {FetcherWithComponents} from '@remix-run/react';
 
 type CartSummaryProps = {
   cart: OptimisticCart<CartApiQueryFragment | null>;
@@ -110,7 +110,8 @@ function CartGiftCard({
 }) {
   const appliedGiftCardCodes = useRef<string[]>([]);
   const giftCardCodeInput = useRef<HTMLInputElement>(null);
-  const codes: string[] = giftCardCodes?.map(({lastCharacters}) => `***${lastCharacters}`) || [];
+  const codes: string[] =
+    giftCardCodes?.map(({lastCharacters}) => `***${lastCharacters}`) || [];
 
   function saveAppliedCode(code: string) {
     const formattedCode = code.replace(/\s/g, ''); // Remove spaces
@@ -141,9 +142,17 @@ function CartGiftCard({
       </dl>
 
       {/* Show an input to apply a discount */}
-      <UpdateGiftCardForm giftCardCodes={appliedGiftCardCodes.current} saveAppliedCode={saveAppliedCode}>
+      <UpdateGiftCardForm
+        giftCardCodes={appliedGiftCardCodes.current}
+        saveAppliedCode={saveAppliedCode}
+      >
         <div>
-          <input type="text" name="giftCardCode" placeholder="Gift card code" ref={giftCardCodeInput} />
+          <input
+            type="text"
+            name="giftCardCode"
+            placeholder="Gift card code"
+            ref={giftCardCodeInput}
+          />
           &nbsp;
           <button type="submit">Apply</button>
         </div>
@@ -172,7 +181,9 @@ function UpdateGiftCardForm({
     >
       {(fetcher: FetcherWithComponents<any>) => {
         const code = fetcher.formData?.get('giftCardCode');
-        if (code) saveAppliedCode && saveAppliedCode(code as string);
+        if (code && saveAppliedCode) {
+          saveAppliedCode(code as string);
+        }
         return children;
       }}
     </CartForm>

package/dist/assets/hydrogen/starter/app/entry.server.tsx

@@ -1,6 +1,6 @@
 import type {EntryContext, AppLoadContext} from '@shopify/remix-oxygen';
 import {RemixServer} from '@remix-run/react';
-import isbot from 'isbot';
+import {isbot} from 'isbot';
 import {renderToReadableStream} from 'react-dom/server';
 import {createContentSecurityPolicy} from '@shopify/hydrogen';
 
@@ -20,13 +20,12 @@ export default async function handleRequest(
 
   const body = await renderToReadableStream(
     <NonceProvider>
-      <RemixServer context={remixContext} url={request.url} />
+      <RemixServer context={remixContext} url={request.url} nonce={nonce}/>
     </NonceProvider>,
     {
       nonce,
       signal: request.signal,
       onError(error) {
-        // eslint-disable-next-line no-console
         console.error(error);
         responseStatusCode = 500;
       },

package/dist/assets/hydrogen/starter/app/root.tsx

@@ -1,5 +1,5 @@
 import {useNonce, getShopAnalytics, Analytics} from '@shopify/hydrogen';
-import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {
   Links,
   Meta,
@@ -26,7 +26,6 @@ export const shouldRevalidate: ShouldRevalidateFunction = ({
   formMethod,
   currentUrl,
   nextUrl,
-  defaultShouldRevalidate,
 }) => {
   // revalidate when a mutation is performed e.g add to cart, login...
   if (formMethod && formMethod !== 'GET') return true;
@@ -34,7 +33,12 @@ export const shouldRevalidate: ShouldRevalidateFunction = ({
   // revalidate when manually revalidating via useRevalidator
   if (currentUrl.toString() === nextUrl.toString()) return true;
 
-  return defaultShouldRevalidate;
+  // Defaulting to no revalidation for root loader data to improve performance. 
+  // When using this feature, you risk your UI getting out of sync with your server. 
+  // Use with caution. If you are uncomfortable with this optimization, update the 
+  // line below to `return defaultShouldRevalidate` instead.
+  // For more details see: https://remix.run/docs/en/main/route/should-revalidate
+  return false;
 };
 
 /**
@@ -70,7 +74,7 @@ export async function loader(args: LoaderFunctionArgs) {
 
   const {storefront, env} = args.context;
 
-  return defer({
+  return {
     ...deferredData,
     ...criticalData,
     publicStoreDomain: env.PUBLIC_STORE_DOMAIN,
@@ -86,7 +90,7 @@ export async function loader(args: LoaderFunctionArgs) {
       country: args.context.storefront.i18n.country,
       language: args.context.storefront.i18n.language,
     },
-  });
+  };
 }
 
 /**

package/dist/assets/hydrogen/starter/app/routes/[robots.txt].tsx

@@ -1,5 +1,4 @@
 import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {useRouteError, isRouteErrorResponse} from '@remix-run/react';
 import {parseGid} from '@shopify/hydrogen';
 
 export async function loader({request, context}: LoaderFunctionArgs) {

package/dist/assets/hydrogen/starter/app/routes/_index.tsx

@@ -1,4 +1,4 @@
-import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {Await, useLoaderData, Link, type MetaFunction} from '@remix-run/react';
 import {Suspense} from 'react';
 import {Image, Money} from '@shopify/hydrogen';
@@ -18,7 +18,7 @@ export async function loader(args: LoaderFunctionArgs) {
   // Await the critical data required to render initial state of the page
   const criticalData = await loadCriticalData(args);
 
-  return defer({...deferredData, ...criticalData});
+  return {...deferredData, ...criticalData};
 }
 
 /**

package/dist/assets/hydrogen/starter/app/routes/account.addresses.tsx

@@ -4,7 +4,7 @@ import type {
   CustomerFragment,
 } from 'customer-accountapi.generated';
 import {
-  json,
+  data,
   type ActionFunctionArgs,
   type LoaderFunctionArgs,
 } from '@shopify/remix-oxygen';
@@ -38,7 +38,7 @@ export const meta: MetaFunction = () => {
 export async function loader({context}: LoaderFunctionArgs) {
   await context.customerAccount.handleAuthStatus();
 
-  return json({});
+  return {};
 }
 
 export async function action({request, context}: ActionFunctionArgs) {
@@ -57,7 +57,7 @@ export async function action({request, context}: ActionFunctionArgs) {
     // this will ensure redirecting to login never happen for mutatation
     const isLoggedIn = await customerAccount.isLoggedIn();
     if (!isLoggedIn) {
-      return json(
+      return data(
         {error: {[addressId]: 'Unauthorized'}},
         {
           status: 401,
@@ -112,21 +112,21 @@ export async function action({request, context}: ActionFunctionArgs) {
             throw new Error('Customer address create failed.');
           }
 
-          return json({
+          return {
             error: null,
             createdAddress: data?.customerAddressCreate?.customerAddress,
             defaultAddress,
-          });
+          };
         } catch (error: unknown) {
           if (error instanceof Error) {
-            return json(
+            return data(
               {error: {[addressId]: error.message}},
               {
                 status: 400,
               },
             );
           }
-          return json(
+          return data(
             {error: {[addressId]: error}},
             {
               status: 400,
@@ -161,21 +161,21 @@ export async function action({request, context}: ActionFunctionArgs) {
             throw new Error('Customer address update failed.');
           }
 
-          return json({
+          return {
             error: null,
             updatedAddress: address,
             defaultAddress,
-          });
+          };
         } catch (error: unknown) {
           if (error instanceof Error) {
-            return json(
+            return data(
               {error: {[addressId]: error.message}},
               {
                 status: 400,
               },
             );
           }
-          return json(
+          return data(
             {error: {[addressId]: error}},
             {
               status: 400,
@@ -206,17 +206,17 @@ export async function action({request, context}: ActionFunctionArgs) {
             throw new Error('Customer address delete failed.');
           }
 
-          return json({error: null, deletedAddress: addressId});
+          return {error: null, deletedAddress: addressId};
         } catch (error: unknown) {
           if (error instanceof Error) {
-            return json(
+            return data(
               {error: {[addressId]: error.message}},
               {
                 status: 400,
               },
             );
           }
-          return json(
+          return data(
             {error: {[addressId]: error}},
             {
               status: 400,
@@ -226,7 +226,7 @@ export async function action({request, context}: ActionFunctionArgs) {
       }
 
       default: {
-        return json(
+        return data(
           {error: {[addressId]: 'Method not allowed'}},
           {
             status: 405,
@@ -236,14 +236,14 @@ export async function action({request, context}: ActionFunctionArgs) {
     }
   } catch (error: unknown) {
     if (error instanceof Error) {
-      return json(
+      return data(
         {error: error.message},
         {
           status: 400,
         },
       );
     }
-    return json(
+    return data(
       {error},
       {
         status: 400,

package/dist/assets/hydrogen/starter/app/routes/account.orders.$id.tsx

@@ -1,4 +1,4 @@
-import {json, redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {useLoaderData, type MetaFunction} from '@remix-run/react';
 import {Money, Image, flattenConnection} from '@shopify/hydrogen';
 import type {OrderLineItemFullFragment} from 'customer-accountapi.generated';
@@ -42,13 +42,13 @@ export async function loader({params, context}: LoaderFunctionArgs) {
     firstDiscount?.__typename === 'PricingPercentageValue' &&
     firstDiscount?.percentage;
 
-  return json({
+  return {
     order,
     lineItems,
     discountValue,
     discountPercentage,
     fulfillmentStatus,
-  });
+  };
 }
 
 export default function OrderRoute() {

package/dist/assets/hydrogen/starter/app/routes/account.orders._index.tsx

@@ -4,7 +4,7 @@ import {
   getPaginationVariables,
   flattenConnection,
 } from '@shopify/hydrogen';
-import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {CUSTOMER_ORDERS_QUERY} from '~/graphql/customer-account/CustomerOrdersQuery';
 import type {
   CustomerOrdersFragment,
@@ -34,7 +34,7 @@ export async function loader({request, context}: LoaderFunctionArgs) {
     throw Error('Customer orders not found');
   }
 
-  return json({customer: data.customer});
+  return {customer: data.customer};
 }
 
 export default function Orders() {

package/dist/assets/hydrogen/starter/app/routes/account.profile.tsx

@@ -2,7 +2,7 @@ import type {CustomerFragment} from 'customer-accountapi.generated';
 import type {CustomerUpdateInput} from '@shopify/hydrogen/customer-account-api-types';
 import {CUSTOMER_UPDATE_MUTATION} from '~/graphql/customer-account/CustomerUpdateMutation';
 import {
-  json,
+  data,
   type ActionFunctionArgs,
   type LoaderFunctionArgs,
 } from '@shopify/remix-oxygen';
@@ -26,14 +26,14 @@ export const meta: MetaFunction = () => {
 export async function loader({context}: LoaderFunctionArgs) {
   await context.customerAccount.handleAuthStatus();
 
-  return json({});
+  return {};
 }
 
 export async function action({request, context}: ActionFunctionArgs) {
   const {customerAccount} = context;
 
   if (request.method !== 'PUT') {
-    return json({error: 'Method not allowed'}, {status: 405});
+    return data({error: 'Method not allowed'}, {status: 405});
   }
 
   const form = await request.formData();
@@ -68,12 +68,12 @@ export async function action({request, context}: ActionFunctionArgs) {
       throw new Error('Customer profile update failed.');
     }
 
-    return json({
+    return {
       error: null,
       customer: data?.customerUpdate?.customer,
-    });
+    };
   } catch (error: any) {
-    return json(
+    return data(
       {error: error.message, customer: null},
       {
         status: 400,

package/dist/assets/hydrogen/starter/app/routes/account.tsx

@@ -1,4 +1,4 @@
-import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {data as remixData, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {Form, NavLink, Outlet, useLoaderData} from '@remix-run/react';
 import {CUSTOMER_DETAILS_QUERY} from '~/graphql/customer-account/CustomerDetailsQuery';
 
@@ -15,7 +15,7 @@ export async function loader({context}: LoaderFunctionArgs) {
     throw new Error('Customer not found');
   }
 
-  return json(
+  return remixData(
     {customer: data.customer},
     {
       headers: {

package/dist/assets/hydrogen/starter/app/routes/blogs.$blogHandle.$articleHandle.tsx

@@ -1,4 +1,4 @@
-import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {useLoaderData, type MetaFunction} from '@remix-run/react';
 import {Image} from '@shopify/hydrogen';
 
@@ -13,7 +13,7 @@ export async function loader(args: LoaderFunctionArgs) {
   // Await the critical data required to render initial state of the page
   const criticalData = await loadCriticalData(args);
 
-  return defer({...deferredData, ...criticalData});
+  return {...deferredData, ...criticalData};
 }
 
 /**

package/dist/assets/hydrogen/starter/app/routes/blogs.$blogHandle._index.tsx

@@ -1,4 +1,4 @@
-import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {Link, useLoaderData, type MetaFunction} from '@remix-run/react';
 import {Image, getPaginationVariables} from '@shopify/hydrogen';
 import type {ArticleItemFragment} from 'storefrontapi.generated';
@@ -15,7 +15,7 @@ export async function loader(args: LoaderFunctionArgs) {
   // Await the critical data required to render initial state of the page
   const criticalData = await loadCriticalData(args);
 
-  return defer({...deferredData, ...criticalData});
+  return {...deferredData, ...criticalData};
 }
 
 /**

package/dist/assets/hydrogen/starter/app/routes/blogs._index.tsx

@@ -1,4 +1,4 @@
-import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {Link, useLoaderData, type MetaFunction} from '@remix-run/react';
 import {getPaginationVariables} from '@shopify/hydrogen';
 import {PaginatedResourceSection} from '~/components/PaginatedResourceSection';
@@ -14,7 +14,7 @@ export async function loader(args: LoaderFunctionArgs) {
   // Await the critical data required to render initial state of the page
   const criticalData = await loadCriticalData(args);
 
-  return defer({...deferredData, ...criticalData});
+  return {...deferredData, ...criticalData};
 }
 
 /**

package/dist/assets/hydrogen/starter/app/routes/cart.tsx

@@ -1,13 +1,15 @@
 import {type MetaFunction, useLoaderData} from '@remix-run/react';
 import type {CartQueryDataReturn} from '@shopify/hydrogen';
 import {CartForm} from '@shopify/hydrogen';
-import {json, type LoaderFunctionArgs, type ActionFunctionArgs} from '@shopify/remix-oxygen';
+import {data, type LoaderFunctionArgs, type ActionFunctionArgs, type HeadersFunction} from '@shopify/remix-oxygen';
 import {CartMain} from '~/components/CartMain';
 
 export const meta: MetaFunction = () => {
   return [{title: `Hydrogen | Cart`}];
 };
 
+export const headers: HeadersFunction = ({actionHeaders}) => actionHeaders;
+
 export async function action({request, context}: ActionFunctionArgs) {
   const {cart} = context;
 
@@ -80,7 +82,7 @@ export async function action({request, context}: ActionFunctionArgs) {
     headers.set('Location', redirectTo);
   }
 
-  return json(
+  return data(
     {
       cart: cartResult,
       errors,
@@ -95,7 +97,7 @@ export async function action({request, context}: ActionFunctionArgs) {
 
 export async function loader({context}: LoaderFunctionArgs) {
   const {cart} = context;
-  return json(await cart.get());
+  return await cart.get();
 }
 
 export default function Cart() {