@shopify/cli 3.83.1 → 3.83.3

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,5 +1,40 @@
 # skeleton
 
+## 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
+
+- Bumping the cli to 3.80.4 ([#2956](https://github.com/Shopify/hydrogen/pull/2956)) by [@balazsbajorics](https://github.com/balazsbajorics)
+
+## 2025.5.0
+
+### Patch Changes
+
+- Migrating to React Router 7 ([#2866](https://github.com/Shopify/hydrogen/pull/2866)) by [@balazsbajorics](https://github.com/balazsbajorics)
+
+- 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
+
+## 2025.4.0
+
+### 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)
+
+- Bump skeleton @shopify/cli and @shopify/mini-oxygen ([#2883](https://github.com/Shopify/hydrogen/pull/2883)) by [@juanpprieto](https://github.com/juanpprieto)
+
+- 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
+
 ## 2025.1.7
 
 ### Patch Changes

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';

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

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

package/dist/assets/hydrogen/starter/app/routes/pages.$handle.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 {redirectIfHandleIsLocalized} from '~/lib/redirect';
 
 export const meta: MetaFunction<typeof loader> = ({data}) => {

package/dist/assets/hydrogen/starter/app/routes/policies.$handle.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 {type Shop} from '@shopify/hydrogen/storefront-api-types';
 
 type SelectedPolicies = keyof Pick<

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

@@ -1,5 +1,5 @@
 import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {useLoaderData, Link} from '@remix-run/react';
+import { useLoaderData, Link } from 'react-router';
 
 export async function loader({context}: LoaderFunctionArgs) {
   const data = await context.storefront.query(POLICIES_QUERY);

package/dist/assets/hydrogen/starter/app/routes/products.$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 {
   getSelectedProductOptions,
   Analytics,

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

@@ -2,7 +2,7 @@ import {
   type LoaderFunctionArgs,
   type ActionFunctionArgs,
 } 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 {SearchForm} from '~/components/SearchForm';
 import {SearchResults} from '~/components/SearchResults';

package/dist/assets/hydrogen/starter/app/routes.ts

@@ -1,5 +1,5 @@
-import {flatRoutes} from '@remix-run/fs-routes';
-import {type RouteConfig} from '@remix-run/route-config';
+import {flatRoutes} from '@react-router/fs-routes';
+import {type RouteConfig} from '@react-router/dev/routes';
 import {hydrogenRoutes} from '@shopify/hydrogen';
 
 export default hydrogenRoutes([

package/dist/assets/hydrogen/starter/env.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="vite/client" />
-/// <reference types="@shopify/remix-oxygen" />
+/// <reference types="react-router" />
 /// <reference types="@shopify/oxygen-workers-types" />
 
 // Enhance TypeScript's built-in typings.
@@ -23,12 +23,22 @@ declare global {
   }
 }
 
-declare module '@shopify/remix-oxygen' {
+declare module 'react-router' {
   interface AppLoadContext
     extends Awaited<ReturnType<typeof createAppLoadContext>> {
     // to change context type, change the return of createAppLoadContext() instead
   }
 
+  // TODO: remove this once we've migrated our loaders to `Route.LoaderArgs` 
+  interface LoaderFunctionArgs {
+    context: AppLoadContext;
+  }
+
+  // TODO: remove this once we've migrated our loaders to `Route.ActionArgs`
+  interface ActionFunctionArgs {
+    context: AppLoadContext;
+  }
+
   interface SessionData extends HydrogenSessionData {
     // declare local additions to the Remix session data here
   }

package/dist/assets/hydrogen/starter/eslint.config.js

@@ -29,6 +29,8 @@ export default [
       '**/*.graphql.d.ts',
       '**/*.graphql.ts',
       '**/*.generated.d.ts',
+      '**/.react-router/',
+      '**/packages/hydrogen/dist/',
     ],
   },
   ...fixupConfigRules(

package/dist/assets/hydrogen/starter/package.json

@@ -2,7 +2,7 @@
   "name": "skeleton",
   "private": true,
   "sideEffects": false,
-  "version": "2025.1.7",
+  "version": "2025.5.2",
   "type": "module",
   "scripts": {
     "build": "shopify hydrogen build --codegen",
@@ -14,31 +14,29 @@
   },
   "prettier": "@shopify/prettier-config",
   "dependencies": {
-    "@remix-run/react": "^2.16.1",
-    "@remix-run/server-runtime": "^2.16.1",
+    "@shopify/hydrogen": "2025.5.0",
+    "@shopify/remix-oxygen": "^3.0.0",
     "graphql": "^16.10.0",
-    "@shopify/hydrogen": "2025.1.4",
-    "@shopify/remix-oxygen": "^2.0.12",
     "graphql-tag": "^2.12.6",
     "isbot": "^5.1.22",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router": "7.6.0",
+    "react-router-dom": "7.6.0"
   },
   "devDependencies": {
     "@eslint/compat": "^1.2.5",
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.18.0",
     "@graphql-codegen/cli": "5.0.2",
-    "@remix-run/dev": "^2.16.1",
-    "@remix-run/fs-routes": "^2.16.1",
-    "@remix-run/route-config": "^2.16.1",
-    "@shopify/cli": "~3.78.1",
+    "@react-router/dev": "7.6.0",
+    "@react-router/fs-routes": "7.6.0",
+    "@shopify/cli": "~3.80.4",
     "@shopify/hydrogen-codegen": "^0.3.3",
     "@shopify/mini-oxygen": "^3.2.1",
     "@shopify/oxygen-workers-types": "^4.1.6",
     "@shopify/prettier-config": "^1.1.2",
     "@total-typescript/ts-reset": "^0.6.1",
-    "prettier": "^3.4.2",
     "@types/eslint": "^9.6.1",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
@@ -54,6 +52,7 @@
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.1.0",
     "globals": "^15.14.0",
+    "prettier": "^3.4.2",
     "typescript": "^5.2.2",
     "vite": "^6.2.4",
     "vite-tsconfig-paths": "^4.3.1"
@@ -61,4 +60,4 @@
   "engines": {
     "node": ">=18.0.0"
   }
-}
+}

package/dist/assets/hydrogen/starter/react-router.config.ts

@@ -0,0 +1,7 @@
+import type {Config} from '@react-router/dev/config';
+
+export default {
+  appDirectory: 'app',
+  buildDirectory: 'dist',
+  ssr: true,
+} satisfies Config;

package/dist/assets/hydrogen/starter/server.ts

@@ -1,8 +1,4 @@
 // Virtual entry point for the app
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-// eslint-disable-next-line import/no-unresolved
-import * as remixBuild from 'virtual:remix/server-build';
 import {storefrontRedirect} from '@shopify/hydrogen';
 import {createRequestHandler} from '@shopify/remix-oxygen';
 import {createAppLoadContext} from '~/lib/context';
@@ -28,7 +24,8 @@ export default {
        * Hydrogen's Storefront client to the loader context.
        */
       const handleRequest = createRequestHandler({
-        build: remixBuild,
+        // eslint-disable-next-line import/no-unresolved
+        build: await import('virtual:react-router/server-build'),
         mode: process.env.NODE_ENV,
         getLoadContext: () => appLoadContext,
       });