@shopify/create-hydrogen 5.0.21 → 5.0.23

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.0",
   "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.79.2",
     "@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,
       });

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

@@ -1,7 +1,16 @@
 {
-  "include": ["./**/*.d.ts", "./**/*.ts", "./**/*.tsx"],
+  "include": [
+    "./**/*.d.ts",
+    "./**/*.ts",
+    "./**/*.tsx",
+    ".react-router/types/**/*"
+  ],
   "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ES2022"
+    ],
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
@@ -16,12 +25,15 @@
     "baseUrl": ".",
     "types": [
       "@shopify/oxygen-workers-types",
-      "@remix-run/server-runtime",
+      "react-router",
       "vite/client"
     ],
     "paths": {
-      "~/*": ["app/*"]
+      "~/*": [
+        "app/*"
+      ]
     },
-    "noEmit": true
+    "noEmit": true,
+    "rootDirs": [".", "./.react-router/types"]
   }
-}
+}

package/dist/assets/hydrogen/starter/vite.config.ts

@@ -1,32 +1,11 @@
 import {defineConfig} from 'vite';
 import {hydrogen} from '@shopify/hydrogen/vite';
 import {oxygen} from '@shopify/mini-oxygen/vite';
-import {vitePlugin as remix} from '@remix-run/dev';
+import {reactRouter} from '@react-router/dev/vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
-declare module "@remix-run/server-runtime" {
-  interface Future {
-    v3_singleFetch: true;
-  }
-}
-
 export default defineConfig({
-  plugins: [
-    hydrogen(),
-    oxygen(),
-    remix({
-      presets: [hydrogen.v3preset()],
-      future: {
-        v3_fetcherPersist: true,
-        v3_relativeSplatPath: true,
-        v3_throwAbortReason: true,
-        v3_lazyRouteDiscovery: true,
-        v3_routeConfig: true,
-        v3_singleFetch: true,
-      },
-    }),
-    tsconfigPaths(),
-  ],
+  plugins: [hydrogen(), oxygen(), reactRouter(), tsconfigPaths()],
   build: {
     // Allow a strict Content-Security-Policy
     // withtout inlining assets as base64:

package/dist/assets/hydrogen/tailwind/package.json

@@ -2,7 +2,10 @@
   "browserslist": [
     "defaults"
   ],
+  "dependencies": {
+    "tailwindcss": "^4.1.6"
+  },
   "devDependencies": {
-    "@tailwindcss/vite": "4.0.14"
+    "@tailwindcss/vite": "^4.1.6"
   }
 }

package/dist/assets/hydrogen/virtual-routes/components/RequestDetails.jsx

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState, useRef } from "react";
-import { Link } from "@remix-run/react";
+import { Link } from "react-router";
 import { IconClose } from "./IconClose.jsx";
 import _useResizeObserver from "use-resize-observer";
 const useResizeObserver = _useResizeObserver;

package/dist/assets/hydrogen/virtual-routes/layout.jsx

@@ -1,12 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useNonce } from "@shopify/hydrogen";
-import {
-  Links,
-  Meta,
-  Outlet,
-  Scripts,
-  ScrollRestoration
-} from "@remix-run/react";
+import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
 import { Layout as VirtualLayout } from "./components/Layout.jsx";
 import styles from "./assets/styles.css?url";
 function Layout() {

package/dist/assets/hydrogen/virtual-routes/routes/index.jsx

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useLoaderData } from "@remix-run/react";
+import { useLoaderData } from "react-router";
 import { HydrogenLogoBaseBW } from "../components/HydrogenLogoBaseBW.jsx";
 import { HydrogenLogoBaseColor } from "../components/HydrogenLogoBaseColor.jsx";
 import { IconGithub } from "../components/IconGithub.jsx";

package/dist/assets/hydrogen/virtual-routes/routes/subrequest-profiler.jsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import { Script } from "@shopify/hydrogen";
 import { RequestWaterfall } from "../components/RequestWaterfall.jsx";
 import { RequestTable } from "../components/RequestTable.jsx";
-import { Link } from "@remix-run/react";
+import { Link } from "react-router";
 import favicon from "../assets/favicon.svg";
 import faviconDark from "../assets/favicon-dark.svg";
 import { useDebugNetworkServer } from "../lib/useDebugNetworkServer.jsx";

package/dist/assets/hydrogen/virtual-routes/virtual-root-with-layout.jsx

@@ -7,7 +7,7 @@ import {
   ScrollRestoration,
   isRouteErrorResponse,
   useRouteError
-} from "@remix-run/react";
+} from "react-router";
 import favicon from "./assets/favicon.svg";
 import { Layout as VirtualLayout } from "./components/Layout.jsx";
 import { useNonce } from "@shopify/hydrogen";

package/dist/assets/hydrogen/virtual-routes/virtual-root.jsx

@@ -7,7 +7,7 @@ import {
   ScrollRestoration,
   isRouteErrorResponse,
   useRouteError
-} from "@remix-run/react";
+} from "react-router";
 import favicon from "./assets/favicon.svg";
 import { Layout as VirtualLayout } from "./components/Layout.jsx";
 import { useNonce } from "@shopify/hydrogen";

package/dist/assets/hydrogen/vite/vite.config.js

@@ -14,7 +14,7 @@ export default defineConfig({
         v3_fetcherPersist: true,
         v3_relativeSplatPath: true,
         v3_throwAbortReason: true,
-        v3_routeConfig: true,
+        v3_routeConfig: false,
       },
     }),
     tsconfigPaths(),