chore: migrate from remix to react router v7 (#1496)

.github/dependabot.yml

@@ -25,9 +25,10 @@ updates:
           - 'major'
           - 'minor'
           - 'patch'
-      remix-run:
+      react-router:
         patterns:
-          - '@remix-run/*'
+          - react-router
+          - '@react-router/*'
         update-types:
           - 'major'
           - 'minor'

.gitignore

@@ -231,3 +231,4 @@ target/
 db.local*
 playwright-report/
 .dev.vars
+.react-router/

apps/web/app/entry.client.tsx

@@ -5,9 +5,10 @@ import * as Sentry from '@sentry/remix'
  * For more information, see https://remix.run/file-conventions/entry.client
  */
 
-import { RemixBrowser, useLocation, useMatches } from '@remix-run/react'
 import { StrictMode, startTransition, useEffect } from 'react'
 import { hydrateRoot } from 'react-dom/client'
+import { useLocation, useMatches } from 'react-router'
+import { HydratedRouter } from 'react-router/dom'
 
 Sentry.init({
   dsn: import.meta.env.VITE_SENTRY_DSN,
@@ -29,7 +30,7 @@ startTransition(() => {
   hydrateRoot(
     document,
     <StrictMode>
-      <RemixBrowser />
+      <HydratedRouter />
     </StrictMode>
   )
 })

apps/web/app/entry.server.tsx

@@ -6,10 +6,10 @@ import * as Sentry from '@sentry/remix'
  * For more information, see https://remix.run/file-conventions/entry.server
  */
 
-import type { AppLoadContext, EntryContext } from '@remix-run/cloudflare'
-import { RemixServer } from '@remix-run/react'
 import { isbot } from 'isbot'
 import { renderToReadableStream } from 'react-dom/server'
+import type { AppLoadContext, EntryContext } from 'react-router'
+import { ServerRouter } from 'react-router'
 
 Sentry.init({
   dsn: import.meta.env.VITE_SENTRY_DSN,
@@ -28,7 +28,7 @@ export default async function handleRequest(
   loadContext: AppLoadContext
 ) {
   const body = await renderToReadableStream(
-    <RemixServer context={remixContext} url={request.url} />,
+    <ServerRouter context={remixContext} url={request.url} />,
     {
       signal: request.signal,
       onError(error: unknown) {

apps/web/app/root.tsx

@@ -1,6 +1,5 @@
-import type { LinksFunction } from '@remix-run/cloudflare'
-import { Links, Meta, Outlet, Scripts } from '@remix-run/react'
 import { withSentry } from '@sentry/remix'
+import { Links, type LinksFunction, Meta, Outlet, Scripts } from 'react-router'
 import stylesheet from './tailwind.css?url'
 
 export const links: LinksFunction = () => [

apps/web/app/routes.ts

@@ -1,3 +1,4 @@
-import { flatRoutes } from '@remix-run/fs-routes'
+import { type RouteConfig } from '@react-router/dev/routes'
+import { flatRoutes } from '@react-router/fs-routes'
 
-export default flatRoutes()
+export default flatRoutes() satisfies RouteConfig

apps/web/app/routes/_index.tsx

@@ -1,4 +1,4 @@
-import type { HeadersFunction, MetaFunction } from '@remix-run/cloudflare'
+import type { HeadersFunction, MetaFunction } from 'react-router'
 
 export const meta: MetaFunction = () => {
   return [

apps/web/app/routes/api.flights.$id.tsx

@@ -1,10 +1,10 @@
 import { makeDatabaseConnection } from '@mach/shared-database'
+import * as Sentry from '@sentry/remix'
 import {
   type HeadersFunction,
-  LoaderFunctionArgs,
+  type LoaderFunctionArgs,
   data,
-} from '@remix-run/cloudflare'
-import * as Sentry from '@sentry/remix'
+} from 'react-router'
 import { fetchFlightById } from '../services/fetch-flight-by-id'
 
 export const headers: HeadersFunction = () => ({

apps/web/app/routes/api.flights.all.tsx

@@ -1,10 +1,10 @@
 import { makeDatabaseConnection } from '@mach/shared-database'
+import * as Sentry from '@sentry/remix'
 import {
   type HeadersFunction,
   type LoaderFunctionArgs,
   data,
-} from '@remix-run/cloudflare'
-import * as Sentry from '@sentry/remix'
+} from 'react-router'
 import { fetchFlights, fetchFlightsSchema } from '../services/fetch-flights'
 
 export const headers: HeadersFunction = () => ({

apps/web/app/routes/api.flights.tsx

@@ -1,10 +1,10 @@
 import { makeDatabaseConnection } from '@mach/shared-database'
+import * as Sentry from '@sentry/remix'
 import {
   type HeadersFunction,
   type LoaderFunctionArgs,
   data,
-} from '@remix-run/cloudflare'
-import * as Sentry from '@sentry/remix'
+} from 'react-router'
 import {
   fetchFlights,
   fetchFlightsSchema,

apps/web/app/routes/api.tsx

@@ -1,4 +1,4 @@
-import { data } from '@remix-run/cloudflare'
+import { data } from 'react-router'
 
 const openApi = {
   openapi: '3.0.1',

apps/web/app/routes/search.tsx

@@ -1,4 +1,4 @@
-import type { MetaFunction } from '@remix-run/cloudflare'
+import type { MetaFunction } from 'react-router'
 
 export const meta: MetaFunction = () => {
   return [

apps/web/package.json

@@ -2,18 +2,17 @@
   "name": "@mach/web",
   "type": "module",
   "scripts": {
-    "serve": "remix vite:dev",
-    "pack": "remix vite:build"
+    "serve": "react-router dev",
+    "pack": "react-router build"
   },
   "dependencies": {
     "@mach/shared-database": "workspace:*",
     "@mach/web-details": "workspace:*",
     "@mach/web-home": "workspace:*",
     "@mach/web-search": "workspace:*",
     "@mach/web-shared-ui": "workspace:*",
-    "@remix-run/cloudflare": "^2.15.2",
-    "@remix-run/cloudflare-pages": "^2.15.2",
-    "isbot": "^5"
+    "isbot": "^5",
+    "react-router": "^7.1.1"
   },
   "nx": {
     "tags": ["type:application"],

apps/web/react-router.config.ts

@@ -0,0 +1,5 @@
+import type { Config } from '@react-router/dev/config'
+
+export default {
+  ssr: true,
+} satisfies Config

apps/web/vite.config.ts

@@ -1,9 +1,8 @@
-import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'
-import {
-  vitePlugin as remix,
-  cloudflareDevProxyVitePlugin as remixCloudflareDevProxy,
-} from '@remix-run/dev'
 /// <reference types='vitest' />
+
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'
+import { reactRouter } from '@react-router/dev/vite'
+import { cloudflareDevProxy } from '@react-router/dev/vite/cloudflare'
 import { sentryVitePlugin } from '@sentry/vite-plugin'
 import { defineConfig } from 'vite'
 import { envOnlyMacros } from 'vite-env-only'
@@ -27,17 +26,8 @@ export default defineConfig({
     host: 'localhost',
   },
   plugins: [
-    remixCloudflareDevProxy(),
-    remix({
-      future: {
-        v3_fetcherPersist: true,
-        v3_relativeSplatPath: true,
-        v3_throwAbortReason: true,
-        v3_lazyRouteDiscovery: true,
-        v3_singleFetch: true,
-        v3_routeConfig: true,
-      },
-    }),
+    cloudflareDevProxy(),
+    reactRouter(),
     envOnlyMacros(),
     nxViteTsPaths(),
     sentryVitePlugin({

functions/[[path]].ts

@@ -1,8 +1,7 @@
-import { createPagesFunctionHandler } from '@remix-run/cloudflare-pages'
+import { createPagesFunctionHandler } from '@react-router/cloudflare'
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore - the server build file is generated by `remix vite:build`
-// eslint-disable-next-line import/no-unresolved
 import * as build from '../apps/web/build/server'
 
 export const onRequest = createPagesFunctionHandler({ build })

modules/shared-database/src/connection.ts

@@ -1,6 +1,6 @@
 import { createClient } from '@libsql/client'
-import { AppLoadContext } from '@remix-run/cloudflare'
 import { drizzle } from 'drizzle-orm/libsql'
+import type { AppLoadContext } from 'react-router'
 import * as schema from './schema'
 
 const client = createClient({

modules/web-details/src/views/index.tsx

@@ -6,9 +6,9 @@ import {
   ModalHeading,
   ModalRoot,
 } from '@mach/web-shared-ui/modal'
-import { LoaderFunctionArgs } from '@remix-run/cloudflare'
-import { useLoaderData, useNavigate } from '@remix-run/react'
 import { ReactNode } from 'react'
+import { LoaderFunctionArgs } from 'react-router'
+import { useLoaderData, useNavigate } from 'react-router'
 import { serverOnly$ } from 'vite-env-only/macros'
 import { fetchFlightById } from '../services/fetch-flight-by-id'
 import { formatEet } from '../utils/format-eet'

modules/web-home/src/views/index.tsx

@@ -4,8 +4,8 @@ import { Checkbox } from '@mach/web-shared-ui/checkbox'
 import { Layout } from '@mach/web-shared-ui/layout'
 import { Lead } from '@mach/web-shared-ui/lead'
 import { Select } from '@mach/web-shared-ui/select'
-import { LoaderFunctionArgs } from '@remix-run/cloudflare'
-import { Form, useLoaderData } from '@remix-run/react'
+import { LoaderFunctionArgs } from 'react-router'
+import { Form, useLoaderData } from 'react-router'
 
 import { useState } from 'react'
 import { serverOnly$ } from 'vite-env-only/macros'

modules/web-search/src/views/error-boundary.tsx

@@ -1,8 +1,8 @@
 import { Layout } from '@mach/web-shared-ui/layout'
 import { Lead } from '@mach/web-shared-ui/lead'
 import { Link } from '@mach/web-shared-ui/link'
-import { useRouteError } from '@remix-run/react'
 import { captureRemixErrorBoundaryError } from '@sentry/remix'
+import { useRouteError } from 'react-router'
 
 export function SearchErrorBoundary() {
   const error = useRouteError()

modules/web-search/src/views/flights-table/index.tsx

@@ -1,6 +1,6 @@
 import { Button } from '@mach/web-shared-ui/button'
 import { Table } from '@mach/web-shared-ui/table'
-import { Link, useSearchParams } from '@remix-run/react'
+import { Link, useSearchParams } from 'react-router'
 import { fetchFlights } from '../../services/fetch-flights'
 import { formatAirport } from '../../utils/format-airport'
 

modules/web-search/src/views/index.tsx

@@ -2,8 +2,8 @@ import { makeDatabaseConnection } from '@mach/shared-database'
 import { Layout } from '@mach/web-shared-ui/layout'
 import { Lead } from '@mach/web-shared-ui/lead'
 import { Link } from '@mach/web-shared-ui/link'
-import { LoaderFunctionArgs } from '@remix-run/cloudflare'
-import { Outlet, useLoaderData } from '@remix-run/react'
+import { LoaderFunctionArgs } from 'react-router'
+import { Outlet, useLoaderData } from 'react-router'
 import { serverOnly$ } from 'vite-env-only/macros'
 import {
   fetchFlights,

package.json

@@ -11,7 +11,6 @@
     "@commitlint/config-conventional": "^19.6.0",
     "@libsql/client": "^0.14.0",
     "@mach/shared-eslint-config": "workspace:*",
-    "@mach/web": "workspace:^",
     "@nx-aws-plugin/nx-aws-cache": "^3.2.3",
     "@nx/devkit": "20.3.0",
     "@nx/eslint": "20.3.0",
@@ -20,13 +19,9 @@
     "@nx/react": "20.3.0",
     "@nx/vite": "20.3.0",
     "@playwright/test": "^1.49.1",
-    "@remix-run/cloudflare": "^2.15.2",
-    "@remix-run/cloudflare-pages": "^2.15.2",
-    "@remix-run/dev": "^2.15.2",
-    "@remix-run/fs-routes": "^2.15.2",
-    "@remix-run/react": "^2.15.2",
-    "@remix-run/route-config": "^2.15.2",
-    "@remix-run/serve": "^2.15.2",
+    "@react-router/cloudflare": "^7.1.1",
+    "@react-router/dev": "^7.1.1",
+    "@react-router/fs-routes": "^7.1.1",
     "@semantic-release/exec": "^6.0.0",
     "@semantic-release/git": "^10.0.1",
     "@sentry/node": "^8.47.0",
@@ -59,7 +54,8 @@
     "postcss": "^8.4.49",
     "react": "^18.3.1",
     "react-aria-components": "^1.5.0",
-    "react-dom": "18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router": "^7.1.1",
     "react-twc": "^1.4.2",
     "semantic-release": "^24.2.0",
     "sherif": "^1.1.1",