@shopify/create-hydrogen 5.0.22 → 5.0.24

package/dist/assets/hydrogen/starter/.cursor/rules/hydrogen-react-router.mdc

@@ -0,0 +1,52 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+
+# React Router Import Rule for Hydrogen
+
+## Overview
+
+This Hydrogen project is based on React Router, not Remix. When working with documentation or code examples, you should always use imports from the appropriate React Router packages instead of Remix packages.
+
+## Import Replacements
+
+When you see imports from Remix packages, replace them with their equivalent React Router v7 packages. Here are the common replacements:
+
+| Remix v2 Package | React Router v7 Package |
+|------------------|-------------------------|
+| `@remix-run/react` | `react-router` |
+| `@remix-run/dev` | `@react-router/dev` |
+| `@remix-run/architect` | `@react-router/architect` |
+| `@remix-run/cloudflare` | `@react-router/cloudflare` |
+| `@remix-run/express` | `@react-router/express` |
+| `@remix-run/fs-routes` | `@react-router/fs-routes` |
+| `@remix-run/node` | `@react-router/node` |
+| `@remix-run/route-config` | `@react-router/dev` |
+| `@remix-run/routes-option-adapter` | `@react-router/remix-routes-option-adapter` |
+| `@remix-run/serve` | `@react-router/serve` |
+| `@remix-run/server-runtime` | `react-router` |
+| `@remix-run/testing` | `react-router` |
+
+NEVER USE 'react-router-dom' imports!
+
+## Common Import Examples
+
+```js
+// INCORRECT (Remix style)
+import { useLoaderData, Link, Form, useActionData, useNavigation, useSubmit } from '@remix-run/react';
+
+// CORRECT (React Router style)
+import { useLoaderData, Link, Form, useActionData, useNavigation, useSubmit } from 'react-router';
+```
+
+## Development Guidelines
+
+1. Always check existing code in the project to understand which specific React Router hooks and components are being used
+2. When generating new code or modifying existing code, ensure all routing-related imports come from the correct React Router packages
+3. If following documentation or examples based on Remix, adapt the code to use React Router equivalents
+
+When working in this codebase, always follow the React Router patterns that are already established in the existing code.
+
+For more information, consult the official Remix to React Router upgrade guide: https://reactrouter.com/upgrading/remix

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

@@ -1,28 +1,30 @@
 # skeleton
 
-## 2025.4.0
+## 2025.5.1
 
 ### Patch Changes
 
-- Moved the Cursor rules into more generic LLM prompt files. If you were using the Cursor rules, you will find the prompts in the `cookbook/llms` folder and they can be put into your `.cursor/rules` folder manually. LLM prompt files will be maintained moving forward, while previous Cursor rules will not be updated anymore. ([#2936](https://github.com/Shopify/hydrogen/pull/2936)) by [@ruggishop](https://github.com/ruggishop)
+- Bumping the cli to 3.80.4 ([#2956](https://github.com/Shopify/hydrogen/pull/2956)) by [@balazsbajorics](https://github.com/balazsbajorics)
 
-- Added bundles recipe ([#2915](https://github.com/Shopify/hydrogen/pull/2915)) by [@ruggishop](https://github.com/ruggishop)
+## 2025.5.0
 
-- Update copy for subscriptions, combined listings, bundles recipes ([#2924](https://github.com/Shopify/hydrogen/pull/2924)) by [@ruggishop](https://github.com/ruggishop)
+### Patch Changes
 
-- Bump skeleton @shopify/cli and @shopify/mini-oxygen ([#2883](https://github.com/Shopify/hydrogen/pull/2883)) by [@juanpprieto](https://github.com/juanpprieto)
+- Migrating to React Router 7 ([#2866](https://github.com/Shopify/hydrogen/pull/2866)) by [@balazsbajorics](https://github.com/balazsbajorics)
 
-- Remove rules from the template. ([#2931](https://github.com/Shopify/hydrogen/pull/2931)) by [@ruggishop](https://github.com/ruggishop)
+- Updated dependencies [[`e9132d88`](https://github.com/Shopify/hydrogen/commit/e9132d8888ad090d3db41fe4d5d63569a30e9d8e), [`e9132d88`](https://github.com/Shopify/hydrogen/commit/e9132d8888ad090d3db41fe4d5d63569a30e9d8e)]:
+  - @shopify/remix-oxygen@3.0.0
+  - @shopify/hydrogen@2025.5.0
 
-- Update SFAPI and CAAPI versions to 2025.04 ([#2886](https://github.com/Shopify/hydrogen/pull/2886)) by [@juanpprieto](https://github.com/juanpprieto)
+## 2025.4.0
 
-- Updated recipes: subscriptions, bundles, combined-listings. New recipe: markets. ([#2930](https://github.com/Shopify/hydrogen/pull/2930)) by [@ruggishop](https://github.com/ruggishop)
+### Patch Changes
 
-- Updated the subscriptions recipe to better display the purchase options. ([#2912](https://github.com/Shopify/hydrogen/pull/2912)) by [@ruggishop](https://github.com/ruggishop)
+- Moved the Cursor rules into more generic LLM prompt files. If you were using the Cursor rules, you will find the prompts in the `cookbook/llms` folder and they can be put into your `.cursor/rules` folder manually. LLM prompt files will be maintained moving forward, while previous Cursor rules will not be updated anymore. ([#2936](https://github.com/Shopify/hydrogen/pull/2936)) by [@ruggishop](https://github.com/ruggishop)
 
-- Bump recipes with copy adjustments ([#2935](https://github.com/Shopify/hydrogen/pull/2935)) by [@ruggishop](https://github.com/ruggishop)
+- Bump skeleton @shopify/cli and @shopify/mini-oxygen ([#2883](https://github.com/Shopify/hydrogen/pull/2883)) by [@juanpprieto](https://github.com/juanpprieto)
 
-- Added a Combined Listings recipe. ([#2876](https://github.com/Shopify/hydrogen/pull/2876)) by [@ruggishop](https://github.com/ruggishop)
+- Update SFAPI and CAAPI versions to 2025.04 ([#2886](https://github.com/Shopify/hydrogen/pull/2886)) by [@juanpprieto](https://github.com/juanpprieto)
 
 - Updated dependencies [[`af23e710`](https://github.com/Shopify/hydrogen/commit/af23e710dac83bb57498d9c2ef1d8bcf9df55d34), [`9d8a6644`](https://github.com/Shopify/hydrogen/commit/9d8a6644a5b67dca890c6687df390aee78fc85c3)]:
   - @shopify/hydrogen@2025.4.0
@@ -164,13 +166,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;
      ```
 
@@ -761,25 +763,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) => (
@@ -813,8 +815,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,
                       }}
                     >
@@ -831,13 +833,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}
@@ -861,7 +863,7 @@
         <AddToCartButton
           disabled={!selectedVariant || !selectedVariant.availableForSale}
           onClick={() => {
-            open('cart');
+            open("cart");
           }}
           lines={
             selectedVariant
@@ -875,7 +877,7 @@
               : []
           }
         >
-          {selectedVariant?.availableForSale ? 'Add to cart' : 'Sold out'}
+          {selectedVariant?.availableForSale ? "Add to cart" : "Sold out"}
         </AddToCartButton>
       </div>
     );
@@ -898,7 +900,7 @@
         aria-label={name}
         className="product-option-label-swatch"
         style={{
-          backgroundColor: color || 'transparent',
+          backgroundColor: color || "transparent",
         }}
       >
         {!!image && <img src={image} alt={name} />}
@@ -1399,21 +1401,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",
     },
   );
   ```
@@ -1989,9 +1991,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.
@@ -2153,10 +2155,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 &&
@@ -2164,7 +2166,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;
@@ -2220,11 +2222,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)
@@ -2439,8 +2441,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 '@remix-run/react';
+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 '@remix-run/react';
+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 '@remix-run/react';
+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

@@ -2,7 +2,7 @@ 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 { FetcherWithComponents } from 'react-router';
 
 type CartSummaryProps = {
   cart: OptimisticCart<CartApiQueryFragment | null>;

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

@@ -1,5 +1,5 @@
 import {Suspense} from 'react';
-import {Await, NavLink} from '@remix-run/react';
+import {Await, NavLink} from 'react-router';
 import type {FooterQuery, HeaderQuery} from 'storefrontapi.generated';
 
 interface FooterProps {

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

@@ -1,5 +1,5 @@
 import {Suspense} from 'react';
-import {Await, NavLink, useAsyncValue} from '@remix-run/react';
+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 '@remix-run/react';
+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 '@remix-run/react';
+import { Link, useNavigate } from 'react-router';
 import {type MappedProductOptions} from '@shopify/hydrogen';
 import type {
   Maybe,

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

@@ -1,4 +1,4 @@
-import {Link} from '@remix-run/react';
+import {Link} from 'react-router';
 import {Image, Money} from '@shopify/hydrogen';
 import type {
   ProductItemFragment,

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

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

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

@@ -1,9 +1,4 @@
-import {
-  useFetcher,
-  useNavigate,
-  type FormProps,
-  type Fetcher,
-} from '@remix-run/react';
+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';

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

@@ -1,4 +1,4 @@
-import {Link} from '@remix-run/react';
+import { Link } from 'react-router';
 import {Image, Money, Pagination} from '@shopify/hydrogen';
 import {urlWithTrackingParams, type RegularSearchReturn} from '~/lib/search';
 

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

@@ -1,4 +1,4 @@
-import {Link, useFetcher, type Fetcher} from '@remix-run/react';
+import { Link, useFetcher, type Fetcher } from 'react-router';
 import {Image, Money} from '@shopify/hydrogen';
 import React, {useRef, useEffect} from 'react';
 import {

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

@@ -1,4 +1,4 @@
-import {RemixBrowser} from '@remix-run/react';
+import { HydratedRouter } from 'react-router/dom';
 import {startTransition, StrictMode} from 'react';
 import {hydrateRoot} from 'react-dom/client';
 
@@ -7,7 +7,7 @@ if (!window.location.origin.includes('webcache.googleusercontent.com')) {
     hydrateRoot(
       document,
       <StrictMode>
-        <RemixBrowser />
+        <HydratedRouter />
       </StrictMode>,
     );
   });

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

@@ -1,14 +1,15 @@
-import type {EntryContext, AppLoadContext} from '@shopify/remix-oxygen';
-import {RemixServer} from '@remix-run/react';
+import type {AppLoadContext} from '@shopify/remix-oxygen';
+import {ServerRouter} from 'react-router';
 import {isbot} from 'isbot';
 import {renderToReadableStream} from 'react-dom/server';
 import {createContentSecurityPolicy} from '@shopify/hydrogen';
+import type {EntryContext} from 'react-router';
 
 export default async function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext,
+  reactRouterContext: EntryContext,
   context: AppLoadContext,
 ) {
   const {nonce, header, NonceProvider} = createContentSecurityPolicy({
@@ -20,7 +21,11 @@ export default async function handleRequest(
 
   const body = await renderToReadableStream(
     <NonceProvider>
-      <RemixServer context={remixContext} url={request.url} nonce={nonce}/>
+      <ServerRouter
+        context={reactRouterContext}
+        url={request.url}
+        nonce={nonce}
+      />
     </NonceProvider>,
     {
       nonce,

package/dist/assets/hydrogen/starter/app/lib/variants.ts

@@ -1,4 +1,4 @@
-import {useLocation} from '@remix-run/react';
+import { useLocation } from 'react-router';
 import type {SelectedOption} from '@shopify/hydrogen/storefront-api-types';
 import {useMemo} from 'react';
 

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

@@ -10,7 +10,7 @@ import {
   Scripts,
   ScrollRestoration,
   useRouteLoaderData,
-} from '@remix-run/react';
+} from 'react-router';
 import favicon from '~/assets/favicon.svg';
 import {FOOTER_QUERY, HEADER_QUERY} from '~/lib/fragments';
 import resetStyles from '~/styles/reset.css?url';

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

@@ -1,5 +1,5 @@
 import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {Await, useLoaderData, Link, type MetaFunction} from '@remix-run/react';
+import { Await, useLoaderData, Link, type MetaFunction } from 'react-router';
 import {Suspense} from 'react';
 import {Image, Money} from '@shopify/hydrogen';
 import type {

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

@@ -15,7 +15,7 @@ import {
   useOutletContext,
   type MetaFunction,
   type Fetcher,
-} from '@remix-run/react';
+} from 'react-router';
 import {
   UPDATE_ADDRESS_MUTATION,
   DELETE_ADDRESS_MUTATION,

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

@@ -1,5 +1,5 @@
 import {redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {useLoaderData, type MetaFunction} from '@remix-run/react';
+import { useLoaderData, type MetaFunction } from 'react-router';
 import {Money, Image, flattenConnection} from '@shopify/hydrogen';
 import type {OrderLineItemFullFragment} from 'customer-accountapi.generated';
 import {CUSTOMER_ORDER_QUERY} from '~/graphql/customer-account/CustomerOrderQuery';
@@ -60,7 +60,7 @@ export default function OrderRoute() {
     fulfillmentStatus,
   } = useLoaderData<typeof loader>();
   return (
-    <div className="account-order">
+    (<div className="account-order">
       <h2>Order {order.name}</h2>
       <p>Placed on {new Date(order.processedAt!).toDateString()}</p>
       <br />
@@ -77,7 +77,7 @@ export default function OrderRoute() {
           <tbody>
             {lineItems.map((lineItem, lineItemIndex) => (
               // eslint-disable-next-line react/no-array-index-key
-              <OrderLineRow key={lineItemIndex} lineItem={lineItem} />
+              (<OrderLineRow key={lineItemIndex} lineItem={lineItem} />)
             ))}
           </tbody>
           <tfoot>
@@ -165,7 +165,7 @@ export default function OrderRoute() {
           View Order Status →
         </a>
       </p>
-    </div>
+    </div>)
   );
 }
 

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

@@ -1,4 +1,4 @@
-import {Link, useLoaderData, type MetaFunction} from '@remix-run/react';
+import { Link, useLoaderData, type MetaFunction } from 'react-router';
 import {
   Money,
   getPaginationVariables,

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

@@ -6,13 +6,7 @@ import {
   type ActionFunctionArgs,
   type LoaderFunctionArgs,
 } from '@shopify/remix-oxygen';
-import {
-  Form,
-  useActionData,
-  useNavigation,
-  useOutletContext,
-  type MetaFunction,
-} from '@remix-run/react';
+import { Form, useActionData, useNavigation, useOutletContext, type MetaFunction } from 'react-router';
 
 export type ActionResponse = {
   error: string | null;

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

@@ -1,5 +1,5 @@
 import {data as remixData, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {Form, NavLink, Outlet, useLoaderData} from '@remix-run/react';
+import { Form, NavLink, Outlet, useLoaderData } from 'react-router';
 import {CUSTOMER_DETAILS_QUERY} from '~/graphql/customer-account/CustomerDetailsQuery';
 
 export function shouldRevalidate() {

package/dist/assets/hydrogen/starter/app/routes/api.$version.[graphql.json].tsx

@@ -0,0 +1,14 @@
+import {LoaderFunctionArgs} from 'react-router';
+
+export async function action({params, context, request}: LoaderFunctionArgs) {
+  const response = await fetch(
+    `https://${context.env.PUBLIC_CHECKOUT_DOMAIN}/api/${params.version}/graphql.json`,
+    {
+      method: 'POST',
+      body: request.body,
+      headers: request.headers,
+    },
+  );
+
+  return new Response(response.body, {headers: new Headers(response.headers)});
+}

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

@@ -1,5 +1,5 @@
 import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {useLoaderData, type MetaFunction} from '@remix-run/react';
+import { useLoaderData, type MetaFunction } from 'react-router';
 import {Image} from '@shopify/hydrogen';
 import {redirectIfHandleIsLocalized} from '~/lib/redirect';
 

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

@@ -1,5 +1,5 @@
 import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {Link, useLoaderData, type MetaFunction} from '@remix-run/react';
+import { Link, useLoaderData, type MetaFunction } from 'react-router';
 import {Image, getPaginationVariables} from '@shopify/hydrogen';
 import type {ArticleItemFragment} from 'storefrontapi.generated';
 import {PaginatedResourceSection} from '~/components/PaginatedResourceSection';

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

@@ -1,5 +1,5 @@
 import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {Link, useLoaderData, type MetaFunction} from '@remix-run/react';
+import { Link, useLoaderData, type MetaFunction } from 'react-router';
 import {getPaginationVariables} from '@shopify/hydrogen';
 import {PaginatedResourceSection} from '~/components/PaginatedResourceSection';
 

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

@@ -1,7 +1,12 @@
-import {type MetaFunction, useLoaderData} from '@remix-run/react';
+import { type MetaFunction, useLoaderData } from 'react-router';
 import type {CartQueryDataReturn} from '@shopify/hydrogen';
 import {CartForm} from '@shopify/hydrogen';
-import {data, type LoaderFunctionArgs, type ActionFunctionArgs, type HeadersFunction} 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 = () => {

package/dist/assets/hydrogen/starter/app/routes/collections.$handle.tsx

@@ -1,5 +1,5 @@
 import {redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {useLoaderData, type MetaFunction} from '@remix-run/react';
+import {useLoaderData, type MetaFunction} from 'react-router';
 import {getPaginationVariables, Analytics} from '@shopify/hydrogen';
 import {PaginatedResourceSection} from '~/components/PaginatedResourceSection';
 import {redirectIfHandleIsLocalized} from '~/lib/redirect';

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

@@ -1,4 +1,4 @@
-import {useLoaderData, Link} from '@remix-run/react';
+import { useLoaderData, Link } from 'react-router';
 import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {getPaginationVariables, Image} from '@shopify/hydrogen';
 import type {CollectionFragment} from 'storefrontapi.generated';