@shopify/create-hydrogen 5.0.24 → 5.0.26

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

@@ -1,5 +1,96 @@
 # skeleton
 
+## 2025.7.0
+
+### Major Changes
+
+- Update Storefront API and Customer Account API to version 2025-07 ([#3082](https://github.com/Shopify/hydrogen/pull/3082)) by [@juanpprieto](https://github.com/juanpprieto)
+
+  This update includes:
+  - Updated API version constants to 2025-07
+  - Regenerated GraphQL types for both Storefront and Customer Account APIs
+  - Updated all hardcoded API version references in documentation and tests
+  - Regenerated skeleton template types
+  - Updated skeleton's @shopify/cli dependency to ~3.83.3
+
+  Breaking changes may occur due to API schema changes between versions.
+
+### Patch Changes
+
+- Fix defer/streaming in development & preview ([#3039](https://github.com/Shopify/hydrogen/pull/3039)) by [@kdaviduik](https://github.com/kdaviduik)
+
+- Upgrade Miniflare from v2 to v4 in mini-oxygen package. ([#3039](https://github.com/Shopify/hydrogen/pull/3039)) by [@kdaviduik](https://github.com/kdaviduik)
+  - Internal MiniOxygen API has been refactored to work with Miniflare v4's new architecture.
+  - Simplified MiniOxygen class - no longer extends MiniflareCore.
+  - Updated global fetch handling to use Miniflare v4's `outboundService` API.
+  - Fixed test infrastructure to use project-relative temporary directories.
+  - Added support for Oxygen compatibility parameters (`compatibilityDate`, `compatibilityFlags`).
+  - Removed dependency on multiple `@miniflare/*` packages in favor of the consolidated `miniflare` package.
+
+- Update and pin react-router to 7.9.2 for 2025.7.0 ([#3138](https://github.com/Shopify/hydrogen/pull/3138)) by [@juanpprieto](https://github.com/juanpprieto)
+
+- Add TypeScript ESLint rules for promise handling to prevent Cloudflare Workers errors ([#3146](https://github.com/Shopify/hydrogen/pull/3146)) by [@kdaviduik](https://github.com/kdaviduik)
+
+  Added `@typescript-eslint/no-floating-promises` and `@typescript-eslint/no-misused-promises` rules to help prevent "The script will never generate a response" errors when deploying to Oxygen/Cloudflare Workers. These rules ensure promises are properly handled with await, return, or void operators, as recommended by [Cloudflare's error documentation](https://developers.cloudflare.com/workers/observability/errors/#the-script-will-never-generate-a-response-errors).
+
+- Fixed React Context error that occurred during client-side hydration when using Content Security Policy (CSP) with nonces. The error "Cannot read properties of null (reading 'useContext')" was caused by the `NonceProvider` being present during server-side rendering but missing during client hydration. ([#3082](https://github.com/Shopify/hydrogen/pull/3082)) by [@juanpprieto](https://github.com/juanpprieto)
+
+  #### Changes for Existing Projects
+
+  If you have customized your `app/entry.client.tsx` file, you may need to wrap your app with the `NonceProvider` during hydration to avoid this error:
+
+  ```diff
+  // app/entry.client.tsx
+  import {HydratedRouter} from 'react-router/dom';
+  import {startTransition, StrictMode} from 'react';
+  import {hydrateRoot} from 'react-dom/client';
+  + import {NonceProvider} from '@shopify/hydrogen';
+
+  if (!window.location.origin.includes('webcache.googleusercontent.com')) {
+    startTransition(() => {
+  +   // Extract nonce from existing script tags
+  +   const existingNonce = document
+  +     .querySelector<HTMLScriptElement>('script[nonce]')
+  +     ?.nonce;
+  +
+      hydrateRoot(
+        document,
+        <StrictMode>
+  -       <HydratedRouter />
+  +       <NonceProvider value={existingNonce}>
+  +         <HydratedRouter />
+  +       </NonceProvider>
+        </StrictMode>,
+      );
+    });
+  }
+  ```
+
+  This ensures the React Context tree matches between server and client rendering, preventing hydration mismatches.
+
+  #### Package Changes
+  - **@shopify/hydrogen**: Exported `NonceProvider` from the main package to allow client-side usage and simplified Vite configuration to improve React Context stability during development
+  - **skeleton**: Updated the template's `entry.client.tsx` to include the `NonceProvider` wrapper during hydration
+
+- Add `fulfillmentStatus` to CAAPI order query and route ([#3039](https://github.com/Shopify/hydrogen/pull/3039)) by [@kdaviduik](https://github.com/kdaviduik)
+
+- Add GraphQL @defer directive support to storefront client ([#3039](https://github.com/Shopify/hydrogen/pull/3039)) by [@kdaviduik](https://github.com/kdaviduik)
+
+- Unpin react-router and react-router-dom versions in the skeleton template ([#3039](https://github.com/Shopify/hydrogen/pull/3039)) by [@kdaviduik](https://github.com/kdaviduik)
+
+- Add `@inContext` language support to Customer Account API mutations ([#3039](https://github.com/Shopify/hydrogen/pull/3039)) by [@kdaviduik](https://github.com/kdaviduik)
+
+- Add order filtering support to the skeleton /account/orders route for Customer Account API flow ([#3125](https://github.com/Shopify/hydrogen/pull/3125)) by [@juanpprieto](https://github.com/juanpprieto)
+
+- Updated dependencies [[`6d067665562223ce2865f1c14be54b0b50258bd4`](https://github.com/Shopify/hydrogen/commit/6d067665562223ce2865f1c14be54b0b50258bd4), [`d57782a1ae3fa0017836d6010fb6ac5ab5d25965`](https://github.com/Shopify/hydrogen/commit/d57782a1ae3fa0017836d6010fb6ac5ab5d25965), [`48cbd450699a29a5667bee7174f3856430508ecc`](https://github.com/Shopify/hydrogen/commit/48cbd450699a29a5667bee7174f3856430508ecc), [`6d067665562223ce2865f1c14be54b0b50258bd4`](https://github.com/Shopify/hydrogen/commit/6d067665562223ce2865f1c14be54b0b50258bd4), [`0b4f01c9aa0e09332140a6a4e3114949873fb0f9`](https://github.com/Shopify/hydrogen/commit/0b4f01c9aa0e09332140a6a4e3114949873fb0f9), [`0d165ff280692411712176427bcd7e0df43b56fe`](https://github.com/Shopify/hydrogen/commit/0d165ff280692411712176427bcd7e0df43b56fe), [`ae7bedc89c1968b4a035f421b5ee6908f6376b1b`](https://github.com/Shopify/hydrogen/commit/ae7bedc89c1968b4a035f421b5ee6908f6376b1b), [`ae7bedc89c1968b4a035f421b5ee6908f6376b1b`](https://github.com/Shopify/hydrogen/commit/ae7bedc89c1968b4a035f421b5ee6908f6376b1b), [`75623a5bfdd8d6f0eab0d3547860341c20d9076c`](https://github.com/Shopify/hydrogen/commit/75623a5bfdd8d6f0eab0d3547860341c20d9076c), [`6681f92e84d42b5a6aca153fb49e31dcd8af84f6`](https://github.com/Shopify/hydrogen/commit/6681f92e84d42b5a6aca153fb49e31dcd8af84f6), [`4daf37ea291334b23bd543fdad5673ab7c9a6133`](https://github.com/Shopify/hydrogen/commit/4daf37ea291334b23bd543fdad5673ab7c9a6133)]:
+  - @shopify/hydrogen@2026.0.0
+
+## 2025.5.2
+
+### Patch Changes
+
+- Fixing the skeleton's Vite Config ([#2958](https://github.com/Shopify/hydrogen/pull/2958)) by [@balazsbajorics](https://github.com/balazsbajorics)
+
 ## 2025.5.1
 
 ### Patch Changes
@@ -34,7 +125,6 @@
 ### Patch Changes
 
 - Fix an issue with our starter template where duplicate content can exist on URLs that use internationalized handles. For example, if you have a product handle in english of `the-havoc` and translate it to `das-chaos` in German, duplicate content exists at both: ([#2821](https://github.com/Shopify/hydrogen/pull/2821)) by [@blittle](https://github.com/blittle)
-
   1. https://hydrogen.shop/de-de/products/das-chaos
   2. https://hydrogen.shop/de-de/products/the-havoc
 
@@ -54,7 +144,6 @@
 ### Patch Changes
 
 - Moved the `Layout` component back into `root.tsx` to avoid issues with styled errors. ([#2829](https://github.com/Shopify/hydrogen/pull/2829)) by [@ruggishop](https://github.com/ruggishop)
-
   1. If you have a separate `app/layout.tsx` file, delete it and move its default exported component into your `root.tsx`. For example:
 
      ```ts
@@ -108,7 +197,6 @@
 - Support for the Remix future flag `v3_routeConfig`. ([#2722](https://github.com/Shopify/hydrogen/pull/2722)) by [@seanparsons](https://github.com/seanparsons)
 
   Please refer to the Remix documentation for more details on `v3_routeConfig` future flag: [https://remix.run/docs/en/main/start/future-flags#v3_routeconfig](https://remix.run/docs/en/main/start/future-flags#v3_routeconfig)
-
   1. Update your `vite.config.ts`.
 
      ```diff
@@ -166,13 +254,13 @@
   1. Add a routes.ts file. This is your new Remix route configuration file.
 
      ```ts
-     import { flatRoutes } from "@remix-run/fs-routes";
-     import { layout, type RouteConfig } from "@remix-run/route-config";
-     import { hydrogenRoutes } from "@shopify/hydrogen";
+     import {flatRoutes} from '@remix-run/fs-routes';
+     import {layout, type RouteConfig} from '@remix-run/route-config';
+     import {hydrogenRoutes} from '@shopify/hydrogen';
 
      export default hydrogenRoutes([
        // Your entire app reading from routes folder using Layout from layout.tsx
-       layout("./layout.tsx", await flatRoutes()),
+       layout('./layout.tsx', await flatRoutes()),
      ]) satisfies RouteConfig;
      ```
 
@@ -203,7 +291,6 @@
   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
@@ -501,7 +588,6 @@
 - Remove initial redirect from product display page ([#2643](https://github.com/Shopify/hydrogen/pull/2643)) by [@scottdixon](https://github.com/scottdixon)
 
 - Optional updates for the product route and product form to handle combined listing and 2000 variant limit. ([#2659](https://github.com/Shopify/hydrogen/pull/2659)) by [@wizardlyhel](https://github.com/wizardlyhel)
-
   1. Update your SFAPI product query to bring in the new query fields:
 
   ```diff
@@ -763,25 +849,25 @@
   8. Update the `ProductForm` component.
 
   ```tsx
-  import { Link, useNavigate } from "@remix-run/react";
-  import { type MappedProductOptions } from "@shopify/hydrogen";
+  import {Link, useNavigate} from '@remix-run/react';
+  import {type MappedProductOptions} from '@shopify/hydrogen';
   import type {
     Maybe,
     ProductOptionValueSwatch,
-  } from "@shopify/hydrogen/storefront-api-types";
-  import { AddToCartButton } from "./AddToCartButton";
-  import { useAside } from "./Aside";
-  import type { ProductFragment } from "storefrontapi.generated";
+  } from '@shopify/hydrogen/storefront-api-types';
+  import {AddToCartButton} from './AddToCartButton';
+  import {useAside} from './Aside';
+  import type {ProductFragment} from 'storefrontapi.generated';
 
   export function ProductForm({
     productOptions,
     selectedVariant,
   }: {
     productOptions: MappedProductOptions[];
-    selectedVariant: ProductFragment["selectedOrFirstAvailableVariant"];
+    selectedVariant: ProductFragment['selectedOrFirstAvailableVariant'];
   }) {
     const navigate = useNavigate();
-    const { open } = useAside();
+    const {open} = useAside();
     return (
       <div className="product-form">
         {productOptions.map((option) => (
@@ -815,8 +901,8 @@
                       to={`/products/${handle}?${variantUriQuery}`}
                       style={{
                         border: selected
-                          ? "1px solid black"
-                          : "1px solid transparent",
+                          ? '1px solid black'
+                          : '1px solid transparent',
                         opacity: available ? 1 : 0.3,
                       }}
                     >
@@ -833,13 +919,13 @@
                     <button
                       type="button"
                       className={`product-options-item${
-                        exists && !selected ? " link" : ""
+                        exists && !selected ? ' link' : ''
                       }`}
                       key={option.name + name}
                       style={{
                         border: selected
-                          ? "1px solid black"
-                          : "1px solid transparent",
+                          ? '1px solid black'
+                          : '1px solid transparent',
                         opacity: available ? 1 : 0.3,
                       }}
                       disabled={!exists}
@@ -863,7 +949,7 @@
         <AddToCartButton
           disabled={!selectedVariant || !selectedVariant.availableForSale}
           onClick={() => {
-            open("cart");
+            open('cart');
           }}
           lines={
             selectedVariant
@@ -877,7 +963,7 @@
               : []
           }
         >
-          {selectedVariant?.availableForSale ? "Add to cart" : "Sold out"}
+          {selectedVariant?.availableForSale ? 'Add to cart' : 'Sold out'}
         </AddToCartButton>
       </div>
     );
@@ -900,7 +986,7 @@
         aria-label={name}
         className="product-option-label-swatch"
         style={{
-          backgroundColor: color || "transparent",
+          backgroundColor: color || 'transparent',
         }}
       >
         {!!image && <img src={image} alt={name} />}
@@ -1313,7 +1399,6 @@
 ### Patch Changes
 
 - Stabilize `getSitemap`, `getSitemapIndex` and implement on skeleton ([#2589](https://github.com/Shopify/hydrogen/pull/2589)) by [@juanpprieto](https://github.com/juanpprieto)
-
   1. Update the `getSitemapIndex` at `/app/routes/[sitemap.xml].tsx`
 
   ```diff
@@ -1401,21 +1486,21 @@
   New `withCache.fetch` is for caching simple fetch requests. This method caches the responses if they are OK responses, and you can pass `shouldCacheResponse`, `cacheKey`, etc. to modify behavior. `data` is the consumed body of the response (we need to consume to cache it).
 
   ```ts
-  const withCache = createWithCache({ cache, waitUntil, request });
+  const withCache = createWithCache({cache, waitUntil, request});
 
-  const { data, response } = await withCache.fetch<{ data: T; error: string }>(
-    "my-cms.com/api",
+  const {data, response} = await withCache.fetch<{data: T; error: string}>(
+    'my-cms.com/api',
     {
-      method: "POST",
-      headers: { "Content-type": "application/json" },
+      method: 'POST',
+      headers: {'Content-type': 'application/json'},
       body,
     },
     {
       cacheStrategy: CacheLong(),
       // Cache if there are no data errors or a specific data that make this result not suited for caching
       shouldCacheResponse: (result) => !result?.error,
-      cacheKey: ["my-cms", body],
-      displayName: "My CMS query",
+      cacheKey: ['my-cms', body],
+      displayName: 'My CMS query',
     },
   );
   ```
@@ -1423,7 +1508,6 @@
 - [**Breaking change**] ([#2585](https://github.com/Shopify/hydrogen/pull/2585)) by [@wizardlyhel](https://github.com/wizardlyhel)
 
   Deprecate usages of `product.options.values` and use `product.options.optionValues` instead.
-
   1. Update your product graphql query to use the new `optionValues` field.
 
   ```diff
@@ -1991,9 +2075,9 @@
 
   ```tsx
   // app/lib/root-data.ts
-  import { useMatches } from "@remix-run/react";
-  import type { SerializeFrom } from "@shopify/remix-oxygen";
-  import type { loader } from "~/root";
+  import {useMatches} from '@remix-run/react';
+  import type {SerializeFrom} from '@shopify/remix-oxygen';
+  import type {loader} from '~/root';
 
   /**
    * Access the result of the root loader from a React component.
@@ -2104,7 +2188,6 @@
 ### Patch Changes
 
 - Improve performance of predictive search: ([#1823](https://github.com/Shopify/hydrogen/pull/1823)) by [@frandiox](https://github.com/frandiox)
-
   - Change the request to be GET instead of POST to avoid Remix route revalidations.
   - Add Cache-Control headers to the response to get quicker results when typing.
 
@@ -2155,10 +2238,10 @@
 - This is an important fix to a bug with 404 routes and path-based i18n projects where some unknown routes would not properly render a 404. This fixes all new projects, but to fix existing projects, add a `($locale).tsx` route with the following contents: ([#1732](https://github.com/Shopify/hydrogen/pull/1732)) by [@blittle](https://github.com/blittle)
 
   ```ts
-  import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
+  import {type LoaderFunctionArgs} from '@remix-run/server-runtime';
 
-  export async function loader({ params, context }: LoaderFunctionArgs) {
-    const { language, country } = context.storefront.i18n;
+  export async function loader({params, context}: LoaderFunctionArgs) {
+    const {language, country} = context.storefront.i18n;
 
     if (
       params.locale &&
@@ -2166,7 +2249,7 @@
     ) {
       // If the locale URL param is defined, yet we still are still at the default locale
       // then the the locale param must be invalid, send to the 404 page
-      throw new Response(null, { status: 404 });
+      throw new Response(null, {status: 404});
     }
 
     return null;
@@ -2222,11 +2305,11 @@
   ```yaml
   projects:
     default:
-      schema: "node_modules/@shopify/hydrogen/storefront.schema.json"
+      schema: 'node_modules/@shopify/hydrogen/storefront.schema.json'
       documents:
-        - "!*.d.ts"
-        - "*.{ts,tsx,js,jsx}"
-        - "app/**/*.{ts,tsx,js,jsx}"
+        - '!*.d.ts'
+        - '*.{ts,tsx,js,jsx}'
+        - 'app/**/*.{ts,tsx,js,jsx}'
   ```
 
 - Improve resiliency of `HydrogenSession` ([#1583](https://github.com/Shopify/hydrogen/pull/1583)) by [@blittle](https://github.com/blittle)
@@ -2324,7 +2407,6 @@
 ### Major Changes
 
 - The Storefront API 2023-10 now returns menu item URLs that include the `primaryDomainUrl`, instead of defaulting to the Shopify store ID URL (example.myshopify.com). The skeleton template requires changes to check for the `primaryDomainUrl`: by [@blittle](https://github.com/blittle)
-
   1. Update the `HeaderMenu` component to accept a `primaryDomainUrl` and include
      it in the internal url check
 
@@ -2441,8 +2523,8 @@
   ```ts
   // root.tsx
 
-  import { useMatches } from "@remix-run/react";
-  import { type SerializeFrom } from "@shopify/remix-oxygen";
+  import {useMatches} from '@remix-run/react';
+  import {type SerializeFrom} from '@shopify/remix-oxygen';
 
   export const useRootLoaderData = () => {
     const [root] = useMatches();

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

@@ -1,4 +1,4 @@
-import { type FetcherWithComponents } from 'react-router';
+import {type FetcherWithComponents} from 'react-router';
 import {CartForm, type OptimisticCartLineInput} from '@shopify/hydrogen';
 
 export function AddToCartButton({

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

@@ -2,7 +2,7 @@ import type {CartLineUpdateInput} from '@shopify/hydrogen/storefront-api-types';
 import type {CartLayout} from '~/components/CartMain';
 import {CartForm, Image, type OptimisticCartLine} from '@shopify/hydrogen';
 import {useVariantUrl} from '~/lib/variants';
-import { Link } from 'react-router';
+import {Link} from 'react-router';
 import {ProductPrice} from './ProductPrice';
 import {useAside} from './Aside';
 import type {CartApiQueryFragment} from 'storefrontapi.generated';

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

@@ -1,5 +1,5 @@
 import {useOptimisticCart} from '@shopify/hydrogen';
-import { Link } from 'react-router';
+import {Link} from 'react-router';
 import type {CartApiQueryFragment} from 'storefrontapi.generated';
 import {useAside} from '~/components/Aside';
 import {CartLineItem} from '~/components/CartLineItem';

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

@@ -1,8 +1,9 @@
 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 'react-router';
+import {useEffect, useRef} from 'react';
+import {useFetcher} from 'react-router';
+import type {FetcherWithComponents} from 'react-router';
 
 type CartSummaryProps = {
   cart: OptimisticCart<CartApiQueryFragment | null>;
@@ -19,19 +20,20 @@ export function CartSummary({cart, layout}: CartSummaryProps) {
       <dl className="cart-subtotal">
         <dt>Subtotal</dt>
         <dd>
-          {cart.cost?.subtotalAmount?.amount ? (
-            <Money data={cart.cost?.subtotalAmount} />
+          {cart?.cost?.subtotalAmount?.amount ? (
+            <Money data={cart?.cost?.subtotalAmount} />
           ) : (
             '-'
           )}
         </dd>
       </dl>
-      <CartDiscounts discountCodes={cart.discountCodes} />
-      <CartGiftCard giftCardCodes={cart.appliedGiftCards} />
-      <CartCheckoutActions checkoutUrl={cart.checkoutUrl} />
+      <CartDiscounts discountCodes={cart?.discountCodes} />
+      <CartGiftCard giftCardCodes={cart?.appliedGiftCards} />
+      <CartCheckoutActions checkoutUrl={cart?.checkoutUrl} />
     </div>
   );
 }
+
 function CartCheckoutActions({checkoutUrl}: {checkoutUrl?: string}) {
   if (!checkoutUrl) return null;
 
@@ -110,41 +112,47 @@ function CartGiftCard({
 }) {
   const appliedGiftCardCodes = useRef<string[]>([]);
   const giftCardCodeInput = useRef<HTMLInputElement>(null);
-  const codes: string[] =
-    giftCardCodes?.map(({lastCharacters}) => `***${lastCharacters}`) || [];
+  const giftCardAddFetcher = useFetcher({key: 'gift-card-add'});
+
+  // Clear the gift card code input after the gift card is added
+  useEffect(() => {
+    if (giftCardAddFetcher.data) {
+      giftCardCodeInput.current!.value = '';
+    }
+  }, [giftCardAddFetcher.data]);
 
   function saveAppliedCode(code: string) {
     const formattedCode = code.replace(/\s/g, ''); // Remove spaces
     if (!appliedGiftCardCodes.current.includes(formattedCode)) {
       appliedGiftCardCodes.current.push(formattedCode);
     }
-    giftCardCodeInput.current!.value = '';
-  }
-
-  function removeAppliedCode() {
-    appliedGiftCardCodes.current = [];
   }
 
   return (
     <div>
-      {/* Have existing gift card applied, display it with a remove option */}
-      <dl hidden={!codes.length}>
-        <div>
+      {/* Display applied gift cards with individual remove buttons */}
+      {giftCardCodes && giftCardCodes.length > 0 && (
+        <dl>
           <dt>Applied Gift Card(s)</dt>
-          <UpdateGiftCardForm>
-            <div className="cart-discount">
-              <code>{codes?.join(', ')}</code>
-              &nbsp;
-              <button onSubmit={() => removeAppliedCode}>Remove</button>
-            </div>
-          </UpdateGiftCardForm>
-        </div>
-      </dl>
+          {giftCardCodes.map((giftCard) => (
+            <RemoveGiftCardForm key={giftCard.id} giftCardId={giftCard.id}>
+              <div className="cart-discount">
+                <code>***{giftCard.lastCharacters}</code>
+                &nbsp;
+                <Money data={giftCard.amountUsed} />
+                &nbsp;
+                <button type="submit">Remove</button>
+              </div>
+            </RemoveGiftCardForm>
+          ))}
+        </dl>
+      )}
 
-      {/* Show an input to apply a discount */}
+      {/* Show an input to apply a gift card */}
       <UpdateGiftCardForm
         giftCardCodes={appliedGiftCardCodes.current}
         saveAppliedCode={saveAppliedCode}
+        fetcherKey="gift-card-add"
       >
         <div>
           <input
@@ -154,7 +162,9 @@ function CartGiftCard({
             ref={giftCardCodeInput}
           />
           &nbsp;
-          <button type="submit">Apply</button>
+          <button type="submit" disabled={giftCardAddFetcher.state !== 'idle'}>
+            Apply
+          </button>
         </div>
       </UpdateGiftCardForm>
     </div>
@@ -164,15 +174,17 @@ function CartGiftCard({
 function UpdateGiftCardForm({
   giftCardCodes,
   saveAppliedCode,
+  fetcherKey,
   children,
 }: {
   giftCardCodes?: string[];
   saveAppliedCode?: (code: string) => void;
-  removeAppliedCode?: () => void;
+  fetcherKey?: string;
   children: React.ReactNode;
 }) {
   return (
     <CartForm
+      fetcherKey={fetcherKey}
       route="/cart"
       action={CartForm.ACTIONS.GiftCardCodesUpdate}
       inputs={{
@@ -189,3 +201,24 @@ function UpdateGiftCardForm({
     </CartForm>
   );
 }
+
+function RemoveGiftCardForm({
+  giftCardId,
+  children,
+}: {
+  giftCardId: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <CartForm
+      route="/cart"
+      action={CartForm.ACTIONS.GiftCardCodesRemove}
+      inputs={{
+        giftCardCodes: [giftCardId],
+      }}
+    >
+      {children}
+    </CartForm>
+  );
+}
+

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

@@ -1,5 +1,5 @@
 import {Suspense} from 'react';
-import { Await, NavLink, useAsyncValue } from 'react-router';
+import {Await, NavLink, useAsyncValue} from 'react-router';
 import {
   type CartViewPayload,
   useAnalytics,

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

@@ -1,4 +1,4 @@
-import { Await, Link } from 'react-router';
+import {Await, Link} from 'react-router';
 import {Suspense, useId} from 'react';
 import type {
   CartApiQueryFragment,

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

@@ -1,4 +1,4 @@
-import { Link, useNavigate } from 'react-router';
+import {Link, useNavigate} from 'react-router';
 import {type MappedProductOptions} from '@shopify/hydrogen';
 import type {
   Maybe,
@@ -84,7 +84,7 @@ export function ProductForm({
                       disabled={!exists}
                       onClick={() => {
                         if (!selected) {
-                          navigate(`?${variantUriQuery}`, {
+                          void navigate(`?${variantUriQuery}`, {
                             replace: true,
                             preventScrollReset: true,
                           });

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

@@ -1,5 +1,5 @@
 import {useRef, useEffect} from 'react';
-import { Form, type FormProps } from 'react-router';
+import {Form, type FormProps} from 'react-router';
 
 type SearchFormProps = Omit<FormProps, 'children'> & {
   children: (args: {

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

@@ -1,4 +1,9 @@
-import { useFetcher, useNavigate, type FormProps, type Fetcher } from 'react-router';
+import {
+  useFetcher,
+  useNavigate,
+  type FormProps,
+  type Fetcher,
+} from 'react-router';
 import React, {useRef, useEffect} from 'react';
 import type {PredictiveSearchReturn} from '~/lib/search';
 import {useAside} from './Aside';
@@ -41,13 +46,13 @@ export function SearchFormPredictive({
   /** Navigate to the search page with the current input value */
   function goToSearch() {
     const term = inputRef?.current?.value;
-    navigate(SEARCH_ENDPOINT + (term ? `?q=${term}` : ''));
+    void navigate(SEARCH_ENDPOINT + (term ? `?q=${term}` : ''));
     aside.close();
   }
 
   /** Fetch search results based on the input value */
   function fetchResults(event: React.ChangeEvent<HTMLInputElement>) {
-    fetcher.submit(
+    void fetcher.submit(
       {q: event.target.value || '', limit: 5, predictive: true},
       {method: 'GET', action: SEARCH_ENDPOINT},
     );

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

@@ -1,4 +1,4 @@
-import { Link } from 'react-router';
+import {Link} from 'react-router';
 import {Image, Money, Pagination} from '@shopify/hydrogen';
 import {urlWithTrackingParams, type RegularSearchReturn} from '~/lib/search';
 
@@ -120,19 +120,11 @@ function SearchResultsProducts({
               <div className="search-results-item" key={product.id}>
                 <Link prefetch="intent" to={productUrl}>
                   {image && (
-                    <Image
-                      data={image}
-                      alt={product.title}
-                      width={50}
-                    />
+                    <Image data={image} alt={product.title} width={50} />
                   )}
                   <div>
                     <p>{product.title}</p>
-                    <small>
-                      {price &&
-                        <Money data={price} />
-                      }
-                    </small>
+                    <small>{price && <Money data={price} />}</small>
                   </div>
                 </Link>
               </div>