@shopify/cli-hydrogen 10.1.0 → 11.0.0

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.4.1",
+  "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.4.1",
-    "@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",
+    "@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/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(),

package/dist/commands/hydrogen/build.js

@@ -6,10 +6,9 @@ import { removeFile, fileSize } from '@shopify/cli-kit/node/fs';
 import { getPackageManager } from '@shopify/cli-kit/node/node-package-manager';
 import { commonFlags, flagsToCamelObject } from '../../lib/flags.js';
 import { prepareDiffDirectory } from '../../lib/template-diff.js';
-import { isViteProject, getViteConfig } from '../../lib/vite-config.js';
+import { isViteProject, REMIX_COMPILER_ERROR_MESSAGE, getViteConfig } from '../../lib/vite-config.js';
 import { checkLockfileStatus } from '../../lib/check-lockfile.js';
 import { findMissingRoutes, warnReservedRoutes, findReservedRoutes } from '../../lib/route-validator.js';
-import { runClassicCompilerBuild } from '../../lib/classic-compiler/build.js';
 import { hydrogenBundleAnalyzer } from '../../lib/bundle/vite-plugin.js';
 import { BUNDLE_ANALYZER_HTML_FILE, getBundleAnalysisSummary } from '../../lib/bundle/analyzer.js';
 import { spawnCodegenProcess, codegen } from '../../lib/codegen.js';
@@ -17,6 +16,7 @@ import { isCI } from '../../lib/is-ci.js';
 import { importVite } from '../../lib/import-utils.js';
 import { deferPromise } from '../../lib/defer.js';
 import { setupResourceCleanup } from '../../lib/resource-cleanup.js';
+import { AbortError } from '@shopify/cli-kit/node/error';
 
 class Build extends Command {
   static descriptionWithMarkdown = `Builds a Hydrogen storefront for production. The client and app worker files are compiled to a \`/dist\` folder in your Hydrogen project directory.`;
@@ -52,7 +52,11 @@ class Build extends Command {
       useCodegen: flags.codegen,
       directory
     };
-    const result = await isViteProject(directory) ? await runBuild(buildParams) : await runClassicCompilerBuild(buildParams);
+    const isVite = await isViteProject(directory);
+    if (!isVite) {
+      throw new AbortError(REMIX_COMPILER_ERROR_MESSAGE);
+    }
+    const result = await runBuild(buildParams);
     if (buildParams.watch) {
       if (diff || result?.close) {
         setupResourceCleanup(async () => {

package/dist/commands/hydrogen/debug/cpu.js

@@ -9,11 +9,11 @@ import { getProjectPaths, isClassicProject } from '../../../lib/remix-config.js'
 import { muteDevLogs } from '../../../lib/log.js';
 import { commonFlags, flagsToCamelObject } from '../../../lib/flags.js';
 import { prepareDiffDirectory } from '../../../lib/template-diff.js';
-import { runClassicCompilerDebugCpu } from '../../../lib/classic-compiler/debug-cpu.js';
 import { setupResourceCleanup } from '../../../lib/resource-cleanup.js';
 import { createCpuStartupProfiler } from '../../../lib/cpu-profiler.js';
 import { runBuild } from '../build.js';
-import { getViteConfig } from '../../../lib/vite-config.js';
+import { REMIX_COMPILER_ERROR_MESSAGE, getViteConfig } from '../../../lib/vite-config.js';
+import { AbortError } from '@shopify/cli-kit/node/error';
 
 const DEFAULT_OUTPUT_PATH = "startup.cpuprofile";
 class DebugCpu extends Command {
@@ -79,13 +79,9 @@ ${colors.dim(output)}`
 Waiting for changes...`);
     }
   };
-  if (await isClassicProject(directory)) {
-    return runClassicCompilerDebugCpu({
-      directory,
-      output,
-      buildPathWorkerFile,
-      hooks
-    });
+  const isClassicCompiler = await isClassicProject(directory);
+  if (isClassicCompiler) {
+    throw new AbortError(REMIX_COMPILER_ERROR_MESSAGE);
   }
   const maybeViteConfig = await getViteConfig(directory).catch(() => null);
   buildPathWorkerFile = maybeViteConfig?.serverOutFile ?? joinPath(buildPath, "server", "index.js");

package/dist/commands/hydrogen/deploy.js

@@ -15,9 +15,8 @@ import { findEnvironmentOrThrow, findEnvironmentByBranchOrThrow, orderEnvironmen
 import { execAsync } from '../../lib/process.js';
 import { commonFlags, overrideFlag, flagsToCamelObject } from '../../lib/flags.js';
 import { getOxygenDeploymentData } from '../../lib/get-oxygen-deployment-data.js';
-import { runClassicCompilerBuild } from '../../lib/classic-compiler/build.js';
 import { runBuild } from './build.js';
-import { getViteConfig } from '../../lib/vite-config.js';
+import { getViteConfig, REMIX_COMPILER_ERROR_MESSAGE } from '../../lib/vite-config.js';
 import { prepareDiffDirectory } from '../../lib/template-diff.js';
 import { isClassicProject, getProjectPaths } from '../../lib/remix-config.js';
 import { packageManagers } from '../../lib/package-managers.js';
@@ -441,8 +440,10 @@ Continue?`.value
       outputInfo(
         outputContent`${colors.whiteBright("Building project...")}`.value
       );
-      const build = isClassicCompiler ? runClassicCompilerBuild : runBuild;
-      await build({
+      if (isClassicCompiler) {
+        throw new AbortError(REMIX_COMPILER_ERROR_MESSAGE);
+      }
+      await runBuild({
         directory: root,
         assetPath,
         lockfileCheck,

package/dist/commands/hydrogen/dev.js

@@ -7,7 +7,7 @@ import { renderSuccess, renderInfo } from '@shopify/cli-kit/node/ui';
 import { AbortError } from '@shopify/cli-kit/node/error';
 import { removeFile } from '@shopify/cli-kit/node/fs';
 import { setH2OVerbose, isH2Verbose, muteDevLogs, enhanceH2Logs } from '../../lib/log.js';
-import { overrideFlag, commonFlags, flagsToCamelObject, DEFAULT_INSPECTOR_PORT, DEFAULT_APP_PORT } from '../../lib/flags.js';
+import { commonFlags, overrideFlag, flagsToCamelObject, DEFAULT_INSPECTOR_PORT, DEFAULT_APP_PORT } from '../../lib/flags.js';
 import { spawnCodegenProcess } from '../../lib/codegen.js';
 import { getAllEnvironmentVariables } from '../../lib/environment-variables.js';
 import { displayDevUpgradeNotice } from './upgrade.js';
@@ -16,8 +16,7 @@ import { getDevConfigInBackground, TUNNEL_DOMAIN, startTunnelAndPushConfig, isMo
 import { getCliCommand } from '../../lib/shell.js';
 import { findPort } from '../../lib/find-port.js';
 import { logRequestLine } from '../../lib/mini-oxygen/common.js';
-import { isViteProject, findHydrogenPlugin, findOxygenPlugin } from '../../lib/vite-config.js';
-import { runClassicCompilerDev } from '../../lib/classic-compiler/dev.js';
+import { isViteProject, REMIX_COMPILER_ERROR_MESSAGE, findHydrogenPlugin, findOxygenPlugin, getViteConfig } from '../../lib/vite-config.js';
 import { importVite } from '../../lib/import-utils.js';
 import { createEntryPointErrorHandler } from '../../lib/deps-optimizer.js';
 import { getCodeFormatOptions } from '../../lib/format-code.js';
@@ -63,17 +62,6 @@ class Dev extends Command {
       description: "Disable adding dependencies to Vite's `ssr.optimizeDeps.include` automatically",
       env: "SHOPIFY_HYDROGEN_FLAG_DISABLE_DEPS_OPTIMIZER",
       default: false
-    }),
-    // For the classic compiler:
-    ...overrideFlag(commonFlags.legacyRuntime, {
-      "legacy-runtime": {
-        description: "[Classic Remix Compiler] " + commonFlags.legacyRuntime["legacy-runtime"].description
-      }
-    }),
-    ...overrideFlag(commonFlags.sourcemap, {
-      sourcemap: {
-        description: "[Classic Remix Compiler] " + commonFlags.sourcemap.sourcemap.description
-      }
     })
   };
   async run() {
@@ -87,7 +75,11 @@ class Dev extends Command {
       path: directory,
       cliConfig: this.config
     };
-    const { close } = await isViteProject(directory) ? await runDev(devParams) : await runClassicCompilerDev(devParams);
+    const isVite = await isViteProject(directory);
+    if (!isVite) {
+      throw new AbortError(REMIX_COMPILER_ERROR_MESSAGE);
+    }
+    const { close } = await runDev(devParams);
     setupResourceCleanup(async () => {
       await close();
       if (diff) {
@@ -212,14 +204,15 @@ async function runDev({
       "Add `hydrogen()` plugin to your Vite config."
     );
   }
-  const h2PluginOptions = h2Plugin.api?.getPluginOptions?.();
+  h2Plugin.api?.getPluginOptions?.();
+  const remixConfig = (await getViteConfig(root)).remixConfig;
   let codegenProcess;
   const setupCodegen = useCodegen ? () => {
     codegenProcess?.kill(0);
     codegenProcess = spawnCodegenProcess({
       rootDirectory: root,
       configFilePath: codegenConfigPath,
-      appDirectory: h2PluginOptions?.remixConfig?.appDirectory
+      appDirectory: remixConfig?.appDirectory
     });
   } : void 0;
   setupCodegen?.();

package/dist/commands/hydrogen/preview.js

@@ -10,9 +10,8 @@ import { startMiniOxygen } from '../../lib/mini-oxygen/index.js';
 import { getAllEnvironmentVariables } from '../../lib/environment-variables.js';
 import { getConfig } from '../../lib/shopify-config.js';
 import { findPort } from '../../lib/find-port.js';
-import { getViteConfig } from '../../lib/vite-config.js';
+import { REMIX_COMPILER_ERROR_MESSAGE, getViteConfig } from '../../lib/vite-config.js';
 import { runBuild } from './build.js';
-import { runClassicCompilerBuild } from '../../lib/classic-compiler/build.js';
 import { setupResourceCleanup } from '../../lib/resource-cleanup.js';
 import { deferPromise } from '../../lib/defer.js';
 import { prepareDiffDirectory } from '../../lib/template-diff.js';
@@ -23,7 +22,6 @@ class Preview extends Command {
   static flags = {
     ...commonFlags.path,
     ...commonFlags.port,
-    ...commonFlags.legacyRuntime,
     ...commonFlags.env,
     ...commonFlags.envBranch,
     ...commonFlags.envFile,
@@ -74,7 +72,6 @@ class Preview extends Command {
 async function runPreview({
   port: appPort,
   directory,
-  legacyRuntime = false,
   env: envHandle,
   envBranch,
   inspectorPort,
@@ -93,11 +90,8 @@ async function runPreview({
   if (!isH2Verbose()) muteDevLogs();
   let { root, buildPath, buildPathWorkerFile, buildPathClient } = getProjectPaths(directory);
   const useClassicCompiler = await isClassicProject(root);
-  if (watch && useClassicCompiler) {
-    throw new AbortError(
-      "Preview in watch mode is not supported for classic Remix projects.",
-      "Please use the dev command instead, which is the equivalent for classic projects."
-    );
+  if (useClassicCompiler) {
+    throw new AbortError(REMIX_COMPILER_ERROR_MESSAGE);
   }
   let miniOxygen;
   const projectBuild = deferPromise();
@@ -111,9 +105,7 @@ async function runPreview({
     useCodegen,
     codegenConfigPath
   };
-  const buildProcess = shouldBuild ? useClassicCompiler ? await runClassicCompilerBuild({
-    ...buildOptions
-  }).then(projectBuild.resolve) : await runBuild({
+  const buildProcess = shouldBuild ? await runBuild({
     ...buildOptions,
     watch,
     async onServerBuildFinish() {
@@ -143,23 +135,20 @@ async function runPreview({
   if (!appPort) {
     appPort = await findPort(DEFAULT_APP_PORT);
   }
-  const assetsPort = legacyRuntime ? 0 : await findPort(appPort + 100);
+  const assetsPort = await findPort(appPort + 100);
   await projectBuild.promise;
   logInjectedVariables();
-  miniOxygen = await startMiniOxygen(
-    {
-      root,
-      appPort,
-      assetsPort,
-      env: allVariables,
-      buildPathClient,
-      buildPathWorkerFile,
-      inspectorPort,
-      debug,
-      watch
-    },
-    legacyRuntime
-  );
+  miniOxygen = await startMiniOxygen({
+    root,
+    appPort,
+    assetsPort,
+    env: allVariables,
+    buildPathClient,
+    buildPathWorkerFile,
+    inspectorPort,
+    debug,
+    watch
+  });
   miniOxygen.showBanner({
     mode: "preview",
     headlinePrefix: watch ? "Watching for changes. " : ""

package/dist/commands/hydrogen/upgrade.js

@@ -318,6 +318,12 @@ function isRemixDependency([name]) {
   }
   return false;
 }
+function isReactRouterDependency([name]) {
+  if (name.includes("react-router")) {
+    return true;
+  }
+  return false;
+}
 function maybeIncludeDependency({
   currentDependencies,
   dependency: [name, version],
@@ -326,6 +332,8 @@ function maybeIncludeDependency({
   const existingDependencyVersion = currentDependencies[name];
   const isRemixPackage = isRemixDependency([name, version]);
   if (isRemixPackage) return false;
+  const isReactRouterPackage = isReactRouterDependency([name, version]);
+  if (isReactRouterPackage) return false;
   const isNextVersion = existingDependencyVersion === "next";
   if (isNextVersion) return false;
   const depMeta = selectedRelease.dependenciesMeta?.[name];
@@ -380,6 +388,26 @@ function buildUpgradeCommandArgs({
       );
     }
   }
+  const currentReactRouter = Object.entries(currentDependencies).find(
+    isReactRouterDependency
+  );
+  const selectedReactRouter = Object.entries(selectedRelease.dependencies).find(
+    isReactRouterDependency
+  );
+  if (currentReactRouter && selectedReactRouter) {
+    const shouldUpgradeReactRouter = semver.lt(
+      getAbsoluteVersion(currentReactRouter[1]),
+      getAbsoluteVersion(selectedReactRouter[1])
+    );
+    if (shouldUpgradeReactRouter) {
+      args.push(
+        ...appendReactRouterDependencies({
+          currentDependencies,
+          selectedReactRouter
+        })
+      );
+    }
+  }
   return args;
 }
 async function upgradeNodeModules({
@@ -420,6 +448,20 @@ function appendRemixDependencies({
   }
   return command;
 }
+function appendReactRouterDependencies({
+  currentDependencies,
+  selectedReactRouter
+}) {
+  const command = [];
+  for (const [name, version] of Object.entries(currentDependencies)) {
+    const isReactRouterPackage = isReactRouterDependency([name, version]);
+    if (!isReactRouterPackage) {
+      continue;
+    }
+    command.push(`${name}@${getAbsoluteVersion(selectedReactRouter[1])}`);
+  }
+  return command;
+}
 function getAbsoluteVersion(version) {
   const result = semver.minVersion(version);
   if (!result) {

package/dist/hooks/init.js

@@ -48,7 +48,7 @@ const hook = async function(options) {
 };
 const EXPERIMENTAL_VM_MODULES_FLAG = "--experimental-vm-modules";
 function commandNeedsVM(id = "", argv = []) {
-  return id === "hydrogen:debug:cpu" || ["hydrogen:dev", "hydrogen:preview"].includes(id) && argv.includes("--legacy-runtime");
+  return id === "hydrogen:debug:cpu";
 }
 function isHydrogenProject(projectPath) {
   try {