build: migrate from Remix v2 to React Router v7 (#237)

MarshallOfSound · web-flow · commit 47dc3ad695cd · 2026-04-08T15:38:02.000-07:00
diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,7 @@ node_modules
 
 /.cache
 /build
+/.react-router
 .env
 
 .envrc
diff --git a/README.md b/README.md
@@ -5,15 +5,15 @@ the [Electron](https://github.com/electron/electron) project.
 
 ## Getting started
 
-The website is built using [Remix](https://remix.run/).
+The website is built using [React Router](https://reactrouter.com/).
 
 ### Installation
 
 To run the app locally, install dependencies and run the `dev` script:
 
 ```
-npm install
-npm run dev
+yarn install
+yarn dev
 ```
 
 ### GitHub Authentication
diff --git a/app/components/ActiveBuildCard.tsx b/app/components/ActiveBuildCard.tsx
@@ -1,4 +1,4 @@
-import { Link } from '@remix-run/react';
+import { Link } from 'react-router';
 import { SudowoodoRelease } from '~/data/release-data';
 
 type ActiveBuildCardProps = {
diff --git a/app/components/ChannelFilterButton.tsx b/app/components/ChannelFilterButton.tsx
@@ -1,4 +1,4 @@
-import { useNavigation } from '@remix-run/react';
+import { useNavigation } from 'react-router';
 import { useCallback } from 'react';
 
 const prettyChannels = {
diff --git a/app/components/PageHeader.tsx b/app/components/PageHeader.tsx
@@ -1,4 +1,4 @@
-import { Link } from '@remix-run/react';
+import { Link } from 'react-router';
 import { ArrowLeft } from 'lucide-react';
 import React from 'react';
 
diff --git a/app/components/Pagination.tsx b/app/components/Pagination.tsx
@@ -1,4 +1,4 @@
-import { useNavigation } from '@remix-run/react';
+import { useNavigation } from 'react-router';
 import { useCallback, useMemo } from 'react';
 
 type PaginationProps = {
diff --git a/app/components/ReleaseTable.tsx b/app/components/ReleaseTable.tsx
@@ -1,4 +1,4 @@
-import { Link } from '@remix-run/react';
+import { Link } from 'react-router';
 import { ElectronRelease } from '~/data/release-data';
 import { humanFriendlyDaysSince, prettyReleaseDate } from '~/helpers/time';
 
diff --git a/app/components/VersionInfo.tsx b/app/components/VersionInfo.tsx
@@ -1,5 +1,5 @@
 import { IconType } from '@icons-pack/react-simple-icons';
-import { Link } from '@remix-run/react';
+import { Link } from 'react-router';
 import { ArrowDown, ArrowRight } from 'lucide-react';
 
 type VersionInfoProps = {
diff --git a/app/components/VersionTimeline.tsx b/app/components/VersionTimeline.tsx
@@ -1,4 +1,4 @@
-import { Link } from '@remix-run/react';
+import { Link } from 'react-router';
 
 type VersionTimelineProps = {
   fromVersion: string;
diff --git a/app/entry.client.tsx b/app/entry.client.tsx
@@ -1,12 +1,12 @@
-import { RemixBrowser } from '@remix-run/react';
 import { startTransition, StrictMode } from 'react';
 import { hydrateRoot } from 'react-dom/client';
+import { HydratedRouter } from 'react-router/dom';
 
 startTransition(() => {
   hydrateRoot(
     document,
     <StrictMode>
-      <RemixBrowser />
+      <HydratedRouter />
     </StrictMode>,
   );
 });
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
@@ -5,15 +5,20 @@ import type {
   AppLoadContext,
   EntryContext,
   LoaderFunctionArgs,
-} from '@remix-run/node';
-import { createReadableStreamFromReadable } from '@remix-run/node';
-import { RemixServer } from '@remix-run/react';
+} from 'react-router';
+import { createReadableStreamFromReadable } from '@react-router/node';
+import { ServerRouter } from 'react-router';
 import { isbot } from 'isbot';
 import { renderToPipeableStream } from 'react-dom/server';
 import { EnvHttpProxyAgent, setGlobalDispatcher } from 'undici';
 import { startDataRefreshTimer } from './data/fresh-interval';
 
-if (process.env.HTTP_PROXY || process.env.HTTPS_PROXY || process.env.http_proxy || process.env.https_proxy) {
+if (
+  process.env.HTTP_PROXY ||
+  process.env.HTTPS_PROXY ||
+  process.env.http_proxy ||
+  process.env.https_proxy
+) {
   setGlobalDispatcher(new EnvHttpProxyAgent());
 }
 
@@ -23,7 +28,7 @@ export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext,
+  routerContext: EntryContext,
   loadContext: AppLoadContext,
 ) {
   if (typeof loadContext.textPlainBody === 'string') {
@@ -38,20 +43,20 @@ export default function handleRequest(
   }
 
   return isbot(request.headers.get('user-agent') || '')
-    ? handleBotRequest(request, responseStatusCode, responseHeaders, remixContext)
-    : handleBrowserRequest(request, responseStatusCode, responseHeaders, remixContext);
+    ? handleBotRequest(request, responseStatusCode, responseHeaders, routerContext)
+    : handleBrowserRequest(request, responseStatusCode, responseHeaders, routerContext);
 }
 
 function handleBotRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext,
+  routerContext: EntryContext,
 ) {
   return new Promise((resolve, reject) => {
     let shellRendered = false;
     const { pipe, abort } = renderToPipeableStream(
-      <RemixServer context={remixContext} url={request.url} />,
+      <ServerRouter context={routerContext} url={request.url} />,
       {
         onAllReady() {
           shellRendered = true;
@@ -89,12 +94,12 @@ function handleBrowserRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext,
+  routerContext: EntryContext,
 ) {
   return new Promise((resolve, reject) => {
     let shellRendered = false;
     const { pipe, abort } = renderToPipeableStream(
-      <RemixServer context={remixContext} url={request.url} />,
+      <ServerRouter context={routerContext} url={request.url} />,
       {
         onShellReady() {
           shellRendered = true;
diff --git a/app/helpers/request.ts b/app/helpers/request.ts
@@ -1,4 +1,4 @@
-import type { AppLoadContext, TypedResponse } from '@remix-run/node';
+import type { AppLoadContext } from 'react-router';
 
 export function wantsTextPlain(request: Request) {
   const accept = request.headers.get('accept');
@@ -13,10 +13,9 @@ export function textPlainResponse(
   context: AppLoadContext,
   body: string,
   cacheControl: string,
-): TypedResponse<never> {
+): Response {
   context.textPlainBody = body;
   context.cacheControl = cacheControl;
-  // Remix will unwrap this into loader data, but entry.server.tsx
-  // short-circuits before rendering when textPlainBody is set.
-  return new Response(null, { status: 200 }) as TypedResponse<never>;
+  // entry.server.tsx short-circuits before rendering when textPlainBody is set.
+  return new Response(null, { status: 200 });
 }
diff --git a/app/redirects/release-build.tsx b/app/redirects/release-build.tsx
@@ -1,5 +1,4 @@
-import { LoaderFunctionArgs } from '@remix-run/node';
-import { redirect } from '@remix-run/react';
+import { LoaderFunctionArgs, redirect } from 'react-router';
 
 export const loader = (args: LoaderFunctionArgs) => {
   return redirect(`/build/${encodeURIComponent(args.params.id!)}`);
diff --git a/app/redirects/releases.tsx b/app/redirects/releases.tsx
@@ -1,5 +1,4 @@
-import { LoaderFunctionArgs } from '@remix-run/node';
-import { redirect } from '@remix-run/react';
+import { LoaderFunctionArgs, redirect } from 'react-router';
 
 const channelsMap: Record<string, string | undefined> = {
   stable: 'stable',
diff --git a/app/root.tsx b/app/root.tsx
@@ -1,5 +1,5 @@
-import { Link, Links, Meta, NavLink, Outlet, Scripts, ScrollRestoration } from '@remix-run/react';
-import type { LinksFunction } from '@remix-run/node';
+import { Link, Links, Meta, NavLink, Outlet, Scripts, ScrollRestoration } from 'react-router';
+import type { LinksFunction } from 'react-router';
 
 import './tailwind.css';
 import { Logo } from '~/components/Logo';
diff --git a/app/routes.ts b/app/routes.ts
@@ -1,4 +1,4 @@
-import { type RouteConfig, index, route } from '@remix-run/route-config';
+import { type RouteConfig, index, route } from '@react-router/dev/routes';
 
 const redirect = (path: string, file: string) => {
   return {
diff --git a/app/routes/build/release-job.tsx b/app/routes/build/release-job.tsx
@@ -6,8 +6,8 @@ import {
   SiGithubactions,
   SiGithubactionsHex,
 } from '@icons-pack/react-simple-icons';
-import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node';
-import { Link, useLoaderData, useParams } from '@remix-run/react';
+import type { LoaderFunctionArgs, MetaFunction } from 'react-router';
+import { Link, useLoaderData, useParams } from 'react-router';
 import { Check, Clock, ExternalLink, GitBranch, X } from 'lucide-react';
 import { getSudowoodoRelease, SudowoodoRelease } from '~/data/release-data';
 import { prettyDateString } from '~/helpers/time';
diff --git a/app/routes/history.tsx b/app/routes/history.tsx
@@ -1,5 +1,5 @@
-import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node';
-import { Link, PrefetchPageLinks, useLoaderData, useSearchParams } from '@remix-run/react';
+import type { LoaderFunctionArgs, MetaFunction } from 'react-router';
+import { Link, PrefetchPageLinks, useLoaderData, useSearchParams } from 'react-router';
 import { ArrowLeft, ArrowRight, Calendar, Clock, Info, MoonIcon } from 'lucide-react';
 import { MouseEvent, useCallback, useState } from 'react';
 import { getReleasesOrUpdate } from '~/data/release-data';
diff --git a/app/routes/history/date.tsx b/app/routes/history/date.tsx
@@ -1,5 +1,5 @@
-import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node';
-import { redirect, useLoaderData, useParams } from '@remix-run/react';
+import type { LoaderFunctionArgs, MetaFunction } from 'react-router';
+import { redirect, useLoaderData, useParams } from 'react-router';
 import { Calendar } from 'lucide-react';
 import { parse as semverParse, compare as semverCompare } from 'semver';
 import { ReleaseTable } from '~/components/ReleaseTable';
diff --git a/app/routes/home.tsx b/app/routes/home.tsx
@@ -1,5 +1,5 @@
-import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node';
-import { useLoaderData } from '@remix-run/react';
+import type { LoaderFunctionArgs, MetaFunction } from 'react-router';
+import { useLoaderData } from 'react-router';
 import { ActiveBuildCard } from '~/components/ActiveBuildCard';
 import { StabilitySection } from '~/components/StabilitySection';
 import { getActiveReleasesOrUpdate, getLatestReleases } from '~/data/release-data';
diff --git a/app/routes/outlet.tsx b/app/routes/outlet.tsx
@@ -1,4 +1,4 @@
-import { Outlet } from '@remix-run/react';
+import { Outlet } from 'react-router';
 
 export default function OutletImmediate() {
   return <Outlet />;
diff --git a/app/routes/pr/details.tsx b/app/routes/pr/details.tsx
@@ -1,5 +1,5 @@
-import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node';
-import { Link, redirect, useLoaderData, useParams } from '@remix-run/react';
+import type { LoaderFunctionArgs, MetaFunction } from 'react-router';
+import { Link, redirect, useLoaderData, useParams } from 'react-router';
 import { SiGithub } from '@icons-pack/react-simple-icons';
 import { getPRDetails } from '~/data/github-data';
 import {
@@ -49,7 +49,11 @@ export const loader = async (args: LoaderFunctionArgs) => {
 
   if (wantsTextPlain(args.request)) {
     if (!pr) {
-      return textPlainResponse(args.context, `# PR #${number}\n\nNot found.\n`, 'private, max-age=60');
+      return textPlainResponse(
+        args.context,
+        `# PR #${number}\n\nNot found.\n`,
+        'private, max-age=60',
+      );
     }
     const state = pr.merged ? 'merged' : pr.state;
     const lines = [
diff --git a/app/routes/pr/lookup.tsx b/app/routes/pr/lookup.tsx
@@ -1,5 +1,5 @@
-import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node';
-import { Link, useLoaderData, useNavigate, useNavigation } from '@remix-run/react';
+import type { LoaderFunctionArgs, MetaFunction } from 'react-router';
+import { Link, useLoaderData, useNavigate, useNavigation } from 'react-router';
 import { SiGithub } from '@icons-pack/react-simple-icons';
 import { getRecentPRs } from '~/data/github-data';
 import { useCallback, useState } from 'react';
diff --git a/app/routes/release/all.tsx b/app/routes/release/all.tsx
@@ -1,5 +1,5 @@
-import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node';
-import { redirect, useLoaderData, useNavigation, useSearchParams } from '@remix-run/react';
+import type { LoaderFunctionArgs, MetaFunction } from 'react-router';
+import { redirect, useLoaderData, useNavigation, useSearchParams } from 'react-router';
 import { LoaderCircle } from 'lucide-react';
 import { useCallback } from 'react';
 import { parse as semverParse } from 'semver';
diff --git a/app/routes/release/compare.tsx b/app/routes/release/compare.tsx
@@ -1,13 +1,6 @@
-import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node';
+import type { LoaderFunctionArgs, MetaFunction } from 'react-router';
 import { parse as semverParse, lt as semverLessThan, gt as semverGreaterThan } from 'semver';
-import {
-  Link,
-  redirect,
-  useLoaderData,
-  useNavigate,
-  useNavigation,
-  useParams,
-} from '@remix-run/react';
+import { Link, redirect, useLoaderData, useNavigate, useNavigation, useParams } from 'react-router';
 import {
   SiGooglechrome,
   SiGooglechromeHex,
diff --git a/app/routes/release/single.tsx b/app/routes/release/single.tsx
@@ -1,6 +1,6 @@
-import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node';
+import type { LoaderFunctionArgs, MetaFunction } from 'react-router';
 import { parse as semverParse } from 'semver';
-import { redirect, useLoaderData, useNavigate, useNavigation, useParams } from '@remix-run/react';
+import { redirect, useLoaderData, useNavigate, useNavigation, useParams } from 'react-router';
 import {
   SiGooglechrome,
   SiGooglechromeHex,
diff --git a/app/routes/schedule.tsx b/app/routes/schedule.tsx
@@ -1,5 +1,5 @@
-import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node';
-import { useLoaderData } from '@remix-run/react';
+import type { LoaderFunctionArgs, MetaFunction } from 'react-router';
+import { useLoaderData } from 'react-router';
 import { ArrowUpRight, Calendar, Info } from 'lucide-react';
 import React from 'react';
 import { getRelativeSchedule, type MajorReleaseSchedule } from '~/data/release-schedule';
diff --git a/package.json b/package.json
@@ -4,13 +4,13 @@
   "sideEffects": false,
   "type": "module",
   "scripts": {
-    "build": "remix vite:build",
-    "dev": "cross-env TZ=America/Los_Angeles remix vite:dev",
+    "build": "react-router build",
+    "dev": "cross-env TZ=America/Los_Angeles react-router dev",
     "dev:redis": "docker compose up -d && cross-env REDIS_URL=redis://localhost:6379 npm run dev",
     "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
     "prettier": "prettier ./app/**/*.ts ./app/**/*.tsx",
-    "start": "cross-env TZ=America/Los_Angeles remix-serve ./build/server/index.js",
-    "typecheck": "tsc",
+    "start": "cross-env TZ=America/Los_Angeles react-router-serve ./build/server/index.js",
+    "typecheck": "react-router typegen && tsc",
     "test": "vitest",
     "prepare": "husky",
     "lint-staged": "lint-staged"
@@ -23,9 +23,8 @@
     "@keyvhq/memoize": "patch:@keyvhq/memoize@npm%3A2.1.11#~/.yarn/patches/@keyvhq-memoize-npm-2.1.11-a8a4b45386.patch",
     "@keyvhq/redis": "^2.1.8",
     "@octokit/rest": "^21.1.1",
-    "@remix-run/node": "^2.17.4",
-    "@remix-run/react": "^2.17.4",
-    "@remix-run/serve": "^2.17.4",
+    "@react-router/node": "^7.13.2",
+    "@react-router/serve": "^7.13.2",
     "cookie": "^1.0.2",
     "cross-env": "^7.0.3",
     "dompurify": "^3.3.2",
@@ -36,6 +35,7 @@
     "markdown-it": "^14.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router": "^7.13.2",
     "semver": "^7.7.1",
     "undici": "^6.24.1"
   },
@@ -44,8 +44,7 @@
     "@eslint/compat": "^1.2.8",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.25.1",
-    "@remix-run/dev": "^2.17.4",
-    "@remix-run/route-config": "^2.17.4",
+    "@react-router/dev": "^7.13.2",
     "@types/geoip-lite": "^1.4.4",
     "@types/jsdom": "^21.1.7",
     "@types/markdown-it": "^14.1.2",
diff --git a/react-router.config.ts b/react-router.config.ts
@@ -0,0 +1,5 @@
+import type { Config } from '@react-router/dev/config';
+
+export default {
+  ssr: true,
+} satisfies Config;
diff --git a/tsconfig.json b/tsconfig.json
@@ -5,11 +5,13 @@
     "**/.server/**/*.ts",
     "**/.server/**/*.tsx",
     "**/.client/**/*.ts",
-    "**/.client/**/*.tsx"
+    "**/.client/**/*.tsx",
+    ".react-router/types/**/*"
   ],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2022"],
-    "types": ["@remix-run/node", "vite/client"],
+    "types": ["@react-router/node", "vite/client"],
+    "rootDirs": [".", "./.react-router/types"],
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
diff --git a/vite.config.ts b/vite.config.ts
diff --git a/yarn.lock b/yarn.lock

-Original file line number
+Diff line change
 /.cache
 /build
 +/.react-router
 .env
 .envrc
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { Link } from '@remix-run/react';`
	`1`	`+import { Link } from 'react-router';`
`2`	`2`	`import { SudowoodoRelease } from '~/data/release-data';`
`3`	`3`
`4`	`4`	`type ActiveBuildCardProps = {`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { useNavigation } from '@remix-run/react';`
	`1`	`+import { useNavigation } from 'react-router';`
`2`	`2`	`import { useCallback } from 'react';`
`3`	`3`
`4`	`4`	`const prettyChannels = {`