React Router 7

.changeset/thick-tigers-grab.md

@@ -0,0 +1,9 @@
+---
+'@shopify/remix-oxygen': patch
+'skeleton': patch
+'@shopify/hydrogen': patch
+'@shopify/cli-hydrogen': patch
+'@shopify/create-hydrogen': patch
+---
+
+Migrating to React Router 7

.changeset/warm-beers-fix.md

@@ -0,0 +1,7 @@
+---
+"@shopify/remix-oxygen": major
+"@shopify/cli-hydrogen": major
+"@shopify/hydrogen": patch
+---
+
+Major version bumping libraries that now depend on react-router@7

cookbook/recipes/subscriptions/ingredients/templates/skeleton/app/components/SellingPlanSelector.tsx

@@ -4,7 +4,7 @@ import type {
   SellingPlanFragment,
 } from 'storefrontapi.generated';
 import {useMemo} from 'react';
-import {useLocation} from '@remix-run/react';
+import {useLocation} from 'react-router';
 
 /* Enriched sellingPlan type including isSelected and url */
 export type SellingPlan = SellingPlanFragment & {

examples/b2b/app/components/B2BLocationProvider.tsx

@@ -1,5 +1,5 @@
 import {createContext, useContext, useEffect, useState, useMemo} from 'react';
-import {useFetcher} from '@remix-run/react';
+import {useFetcher} from 'react-router';
 import {type CustomerCompany} from '~/root';
 
 export type B2BLocationContextValue = {

examples/b2b/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 '~/components/ProductPrice';
 import {useAside} from '~/components/Aside';
 import type {CartApiQueryFragment} from 'storefrontapi.generated';
@@ -113,7 +113,9 @@ function CartLineQuantity({line}: {line: CartLine}) {
           value={nextQuantity}
           /***********************************************/
           /**********  EXAMPLE UPDATE STARTS  ************/
-          disabled={Boolean(maximum && nextQuantity > maximum || !!isOptimistic)}
+          disabled={Boolean(
+            (maximum && nextQuantity > maximum) || !!isOptimistic,
+          )}
           /**********   EXAMPLE UPDATE END   ************/
           /***********************************************/
         >

examples/b2b/app/components/Header.tsx

@@ -1,5 +1,5 @@
 import {Suspense} from 'react';
-import {Await, NavLink} from '@remix-run/react';
+import {Await, NavLink} from 'react-router';
 import {type CartViewPayload, useAnalytics} from '@shopify/hydrogen';
 import type {HeaderQuery, CartApiQueryFragment} from 'storefrontapi.generated';
 import {useAside} from '~/components/Aside';

examples/b2b/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,
@@ -104,7 +104,7 @@ export function ProductForm({
             </div>
             <br />
           </div>
-        )
+        );
       })}
       <br />
       <AddToCartButton

examples/b2b/app/root.tsx

@@ -1,5 +1,4 @@
 import {useNonce, getShopAnalytics, Analytics} from '@shopify/hydrogen';
-import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {
   Links,
   Meta,
@@ -9,8 +8,9 @@ import {
   useRouteLoaderData,
   ScrollRestoration,
   isRouteErrorResponse,
+  type LoaderFunctionArgs,
   type ShouldRevalidateFunction,
-} from '@remix-run/react';
+} from 'react-router';
 import favicon from '~/assets/favicon.svg';
 import resetStyles from '~/styles/reset.css?url';
 import appStyles from '~/styles/app.css?url';

examples/b2b/app/routes/b2blocations.tsx

@@ -1,5 +1,4 @@
-import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {useLoaderData} from '@remix-run/react';
+import {type LoaderFunctionArgs, useLoaderData} from 'react-router';
 import {B2BLocationSelector} from '../components/B2BLocationSelector';
 import {CUSTOMER_LOCATIONS_QUERY} from '~/graphql/customer-account/CustomerLocationsQuery';
 

examples/b2b/app/routes/products.$handle.tsx

@@ -1,5 +1,8 @@
-import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {useLoaderData, type MetaFunction} from '@remix-run/react';
+import {
+  useLoaderData,
+  type LoaderFunctionArgs,
+  type MetaFunction,
+} from 'react-router';
 import {
   getSelectedProductOptions,
   Analytics,

examples/b2b/storefrontapi.generated.d.ts

@@ -601,7 +601,7 @@ export type PageQueryVariables = StorefrontAPI.Exact<{
 
 export type PageQuery = {
   page?: StorefrontAPI.Maybe<
-    Pick<StorefrontAPI.Page, 'id' | 'title' | 'body'> & {
+    Pick<StorefrontAPI.Page, 'handle' | 'id' | 'title' | 'body'> & {
       seo?: StorefrontAPI.Maybe<
         Pick<StorefrontAPI.Seo, 'description' | 'title'>
       >;
@@ -1260,7 +1260,7 @@ interface GeneratedQueryTypes {
     return: CatalogQuery;
     variables: CatalogQueryVariables;
   };
-  '#graphql\n  query Page(\n    $language: LanguageCode,\n    $country: CountryCode,\n    $handle: String!\n  )\n  @inContext(language: $language, country: $country) {\n    page(handle: $handle) {\n      id\n      title\n      body\n      seo {\n        description\n        title\n      }\n    }\n  }\n': {
+  '#graphql\n  query Page(\n    $language: LanguageCode,\n    $country: CountryCode,\n    $handle: String!\n  )\n  @inContext(language: $language, country: $country) {\n    page(handle: $handle) {\n      handle\n      id\n      title\n      body\n      seo {\n        description\n        title\n      }\n    }\n  }\n': {
     return: PageQuery;
     variables: PageQueryVariables;
   };

examples/custom-cart-method/app/components/Cart.tsx

@@ -9,7 +9,7 @@ import type {
   CartLineUpdateInput,
   SelectedOption,
 } from '@shopify/hydrogen/storefront-api-types';
-import {Link} from '@remix-run/react';
+import {Link} from 'react-router';
 import type {CartApiQueryFragment} from 'storefrontapi.generated';
 import {useVariantUrl} from '~/lib/variants';
 

examples/custom-cart-method/app/routes/cart.tsx

@@ -1,7 +1,13 @@
-import {type MetaFunction, useLoaderData} from '@remix-run/react';
+import {
+  type ActionFunctionArgs,
+  type HeadersFunction,
+  type LoaderFunctionArgs,
+  type MetaFunction,
+  data,
+  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 type {
   SelectedOptionInput,
   CartLineUpdateInput,

examples/custom-cart-method/storefrontapi.generated.d.ts

@@ -603,7 +603,7 @@ export type PageQueryVariables = StorefrontAPI.Exact<{
 
 export type PageQuery = {
   page?: StorefrontAPI.Maybe<
-    Pick<StorefrontAPI.Page, 'id' | 'title' | 'body'> & {
+    Pick<StorefrontAPI.Page, 'handle' | 'id' | 'title' | 'body'> & {
       seo?: StorefrontAPI.Maybe<
         Pick<StorefrontAPI.Seo, 'description' | 'title'>
       >;
@@ -1179,7 +1179,7 @@ interface GeneratedQueryTypes {
     return: CatalogQuery;
     variables: CatalogQueryVariables;
   };
-  '#graphql\n  query Page(\n    $language: LanguageCode,\n    $country: CountryCode,\n    $handle: String!\n  )\n  @inContext(language: $language, country: $country) {\n    page(handle: $handle) {\n      id\n      title\n      body\n      seo {\n        description\n        title\n      }\n    }\n  }\n': {
+  '#graphql\n  query Page(\n    $language: LanguageCode,\n    $country: CountryCode,\n    $handle: String!\n  )\n  @inContext(language: $language, country: $country) {\n    page(handle: $handle) {\n      handle\n      id\n      title\n      body\n      seo {\n        description\n        title\n      }\n    }\n  }\n': {
     return: PageQuery;
     variables: PageQueryVariables;
   };

examples/express/app/entry.client.tsx

@@ -4,15 +4,15 @@
  * For more information, see https://remix.run/file-conventions/entry.client
  */
 
-import {RemixBrowser} from '@remix-run/react';
+import {HydratedRouter} from 'react-router/dom';
 import {startTransition, StrictMode} from 'react';
 import {hydrateRoot} from 'react-dom/client';
 
 startTransition(() => {
   hydrateRoot(
     document,
     <StrictMode>
-      <RemixBrowser />
+      <HydratedRouter />
     </StrictMode>,
   );
 });

examples/express/app/entry.server.tsx

@@ -6,9 +6,9 @@
 
 import {PassThrough} from 'node:stream';
 
-import type {AppLoadContext, EntryContext} from '@remix-run/node';
+import type {AppLoadContext, EntryContext} from 'react-router';
 import {Response} from '@remix-run/web-fetch';
-import {RemixServer} from '@remix-run/react';
+import {ServerRouter} from 'react-router';
 import {isbot} from 'isbot';
 import {renderToPipeableStream} from 'react-dom/server';
 import {createContentSecurityPolicy} from '@shopify/hydrogen';
@@ -19,30 +19,30 @@ export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext,
+  reactRouterContext: EntryContext,
   loadContext: AppLoadContext,
 ) {
   return isbot(request.headers.get('user-agent'))
     ? handleBotRequest(
         request,
         responseStatusCode,
         responseHeaders,
-        remixContext,
+        reactRouterContext,
         loadContext,
       )
     : handleBrowserRequest(
         request,
         responseStatusCode,
         responseHeaders,
-        remixContext,
+        reactRouterContext,
       );
 }
 
 function handleBotRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext,
+  reactRouterContext: EntryContext,
   context: AppLoadContext,
 ) {
   return new Promise((resolve, reject) => {
@@ -55,10 +55,9 @@ function handleBotRequest(
 
     const {pipe, abort} = renderToPipeableStream(
       <NonceProvider>
-        <RemixServer
-          context={remixContext}
+        <ServerRouter
+          context={reactRouterContext}
           url={request.url}
-          abortDelay={ABORT_DELAY}
           nonce={nonce}
         />
       </NonceProvider>,
@@ -99,17 +98,16 @@ function handleBrowserRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext,
+  reactRouterContext: EntryContext,
 ) {
   const {nonce, header, NonceProvider} = createContentSecurityPolicy();
 
   return new Promise((resolve, reject) => {
     const {pipe, abort} = renderToPipeableStream(
       <NonceProvider>
-        <RemixServer
-          context={remixContext}
+        <ServerRouter
+          context={reactRouterContext}
           url={request.url}
-          abortDelay={ABORT_DELAY}
           nonce={nonce}
         />
       </NonceProvider>,

examples/express/app/root.tsx

@@ -1,15 +1,13 @@
 import {
   type LinksFunction,
   type LoaderFunctionArgs,
-} from '@remix-run/node';
-import {
   Links,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
   useRouteLoaderData,
-} from '@remix-run/react';
+} from 'react-router';
 import type {Cart, Shop} from '@shopify/hydrogen/storefront-api-types';
 import styles from './styles/app.css?url';
 import {useNonce} from '@shopify/hydrogen';

examples/express/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([...(await flatRoutes())]) satisfies RouteConfig;

examples/express/app/routes/_index.tsx

@@ -1,4 +1,4 @@
-import {useRouteError, isRouteErrorResponse, Link} from '@remix-run/react';
+import {useRouteError, isRouteErrorResponse, Link} from 'react-router';
 
 export default function Index() {
   return (

examples/express/app/routes/products.$handle.tsx

@@ -1,5 +1,4 @@
-import {type LoaderFunctionArgs} from '@remix-run/node';
-import {useLoaderData} from '@remix-run/react';
+import {type LoaderFunctionArgs, useLoaderData} from 'react-router';
 
 export async function loader({params, context}: LoaderFunctionArgs) {
   const {handle} = params;

examples/express/env.d.ts

@@ -22,7 +22,7 @@ declare global {
   }
 }
 
-declare module '@remix-run/node' {
+declare module 'react-router' {
   /**
    * Declare local additions to the Remix loader context.
    */
@@ -32,6 +32,16 @@ declare module '@remix-run/node' {
     session: AppSession;
   }
 
+  // TODO: remove this once we've migrated to `Route.LoaderArgs` instead for our loaders
+  interface LoaderFunctionArgs {
+    context: AppLoadContext;
+  }
+
+  // TODO: remove this once we've migrated to `Route.ActionArgs` instead for our actions
+  interface ActionFunctionArgs {
+    context: AppLoadContext;
+  }
+
   interface SessionData extends HydrogenSessionData {
     // declare local additions to the Remix session data here
   }

examples/express/package.json

@@ -4,16 +4,14 @@
   "sideEffects": false,
   "type": "module",
   "scripts": {
-    "build": "remix vite:build",
+    "build": "react-router build",
     "dev": "cross-env NODE_ENV=development nodemon --require dotenv/config ./server.mjs --watch ./server.mjs",
     "start": "cross-env NODE_ENV=production node ./server.mjs",
-    "typecheck": "tsc"
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@remix-run/express": "^2.16.1",
-    "@remix-run/node": "^2.16.1",
-    "@remix-run/react": "^2.16.1",
-    "@remix-run/server-runtime": "^2.16.1",
+    "@react-router/express": "7.6.0",
+    "@react-router/node": "7.6.0",
     "@remix-run/eslint-config": "^2.16.1",
     "@shopify/hydrogen": "2025.4.0",
     "compression": "^1.7.4",
@@ -22,13 +20,13 @@
     "isbot": "^5.1.21",
     "morgan": "^1.10.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router": "7.6.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.18.0",
-    "@remix-run/dev": "^2.16.1",
-    "@remix-run/fs-routes": "^2.16.1",
-    "@remix-run/route-config": "^2.16.1",
+    "@react-router/dev": "7.6.0",
+    "@react-router/fs-routes": "7.6.0",
     "@shopify/cli": "~3.79.2",
     "@types/compression": "^1.7.2",
     "@types/express": "^4.17.17",
@@ -45,4 +43,4 @@
   "engines": {
     "node": ">=18.0.0"
   }
-}
+}