React Router 7 (#2866)

* checkpoint: hydrogen lib is pulling in RR7 and types are fixed

* Update plugin.ts

* Update vite.config.ts

* gitignore and eslint ignore changes

* checkpoint: the skeleton is semi-updated, typecheck runs, npm run dev fails

* stripping sharedOptions.remixConfig from the hydrogen vite plugin

* updating remix-oxygen

* remove the classic compiler option from hydrogen-cli

* removing the classic remix example

* removing the classic-remix example leftovers

* checkpoint: CLI builds but the tests fail

* fix json syntax error in skeleton tsconfig.json

* changing all examples package jsons to match the skeleton

* fixing typo

* fixing two false detections of classic projects

* removing @remix-run/fs-routes from root package.json

* do I need react-router-dom in the skeleton too?

* pruning remix-config.ts in cli

* fixing tsconfig of cli

* fixing types of hydrogen Pagination.ts

* pruning exports from remix-oxygen/index.ts – note: all of these re-exports should be removed

* removing outdated reference to @remix-run/server-runtime here

* removing no-longer applicable remix-run reference

* type fix in hydrogen / VariantSelector.ts

* Update package-lock.json

* updating ALL of the examples to React Router 7 via codemod

* Update entry.server.tsx

* it seems like the skeleton's build directory should be 'dist' according to CLI tests

* _temporarily_ adding react-router-dom to the root package. this should be weeded out

* respect HYDROGEN_DISABLE_VIRTUAL_ROUTES in hydrogenRoutes

* prettier change

* the auto-upgrade now ALSO works with react router

* fixing build

* CLI: temporarily skipping typecheck test

* Update collections.$handle.tsx

* fixing botched merge

* running Prettier on package.json

* adding this vite config v6 fix, just in case... but maybe we will remove this

* oh god

* a few more remix-runs

* Update Footer.tsx

* codegen now runs react-router typegen

* removing react-router typegen from the typecheck command

* Update package.json

* fixing types in examples/express

* skeleton env.d.ts refers to react-router now

* fixing skeleton type errors

* fixing examples/express/env.d.ts

* fixing all the env.d.ts 'es

* adding these env.d.ts es to fix the remaining example tsc failures

* Update package-lock.json

* Snapit: adding @shopify/remix-oxygen to the forced changeset

* adding back three re-exported types from react-router

* Update codegen.ts

* adding .react-router to the skeleton gitignore

* undo root .gitignore changes

* react-router codegen supports watch flag now

* reformatting codegen.ts

* TODO BEFORE MERGE remove ALL references to legacy-runtime

* fixing a few react-router imports

* const REMIX_COMPILER_ERROR_MESSAGE

* removing react-router and react-router-dom from the root dependencies

* regenerated package-lock.json from the main baseline

* Revert "regenerated package-lock.json from the main baseline"

This reverts commit e5b074f.

* Revert "removing react-router and react-router-dom from the root dependencies"

This reverts commit 28fc65e.

* pinning react-router to 7.6.0

* adding a changeset

* adding cursor rule with hydrogen upgrade instructions

* Update package-lock.json

* simplifying skeleton's virtual import

* Update thick-tigers-grab.md

* removing all references to legacy-runtime

* Update dev.env.d.ts

* Update env.d.ts

* scrubbing more references to legacyRuntime

* whooops

* re-enabling createContentSecurityPolicy example

* try removing the HYDROGEN_DISABLE_VIRTUAL_ROUTES fix

* will this test pass now, maybe?

* removing two TODO BEFORE MERGEs as they are done!

* removing remix-oxygen/src/implementations.ts

* what happens if we only change the relevant parts in the vite.config.ts?

* Delete upgrade-hydrogen-react-router-7-2025.5.0.mdc

* Major version bumping libraries that now depend on react-router@7

* renaming remixBuild to reactRouterBuild

Author: balazsbajorics

.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,