Feat/migrate to react router 7 (#897)

Co-authored-by: Kent C. Dodds <[email protected]>
Co-authored-by: Hakim Gueye <[email protected]>
Co-authored-by: Hakim Gueye <[email protected]>
Co-authored-by: Kent C. Dodds <[email protected]>

Author: 3 people

.gitignore

@@ -23,3 +23,4 @@ node_modules
 
 # generated files
 /app/components/ui/icons
+.react-router/

app/components/error-boundary.tsx

@@ -1,12 +1,12 @@
+import { captureException } from '@sentry/react'
+import { useEffect, type ReactElement } from 'react'
 import {
 	type ErrorResponse,
 	isRouteErrorResponse,
 	useParams,
 	useRouteError,
-} from '@remix-run/react'
-import { captureRemixErrorBoundaryError } from '@sentry/remix'
-import { type ReactElement } from 'react'
-import { getErrorMessage } from '#app/utils/misc.tsx'
+} from 'react-router'
+import { getErrorMessage } from '#app/utils/misc'
 
 type StatusHandler = (info: {
 	error: ErrorResponse
@@ -27,13 +27,16 @@ export function GeneralErrorBoundary({
 	unexpectedErrorHandler?: (error: unknown) => ReactElement | null
 }) {
 	const error = useRouteError()
-	captureRemixErrorBoundaryError(error)
 	const params = useParams()
 
 	if (typeof document !== 'undefined') {
 		console.error(error)
 	}
 
+	useEffect(() => {
+		captureException(error)
+	}, [error])
+
 	return (
 		<div className="container flex items-center justify-center p-20 text-h2">
 			{isRouteErrorResponse(error)

app/components/progress-bar.tsx

@@ -1,4 +1,4 @@
-import { useNavigation } from '@remix-run/react'
+import { useNavigation } from 'react-router'
 import { useEffect, useRef, useState } from 'react'
 import { useSpinDelay } from 'spin-delay'
 import { cn } from '#app/utils/misc.tsx'

app/components/search-bar.tsx

@@ -1,5 +1,5 @@
-import { Form, useSearchParams, useSubmit } from '@remix-run/react'
 import { useId } from 'react'
+import { Form, useSearchParams, useSubmit } from 'react-router'
 import { useDebounce, useIsPending } from '#app/utils/misc.tsx'
 import { Icon } from './ui/icon.tsx'
 import { Input } from './ui/input.tsx'
@@ -23,8 +23,8 @@ export function SearchBar({
 		formAction: '/users',
 	})
 
-	const handleFormChange = useDebounce((form: HTMLFormElement) => {
-		submit(form)
+	const handleFormChange = useDebounce(async (form: HTMLFormElement) => {
+		await submit(form)
 	}, 400)
 
 	return (

app/entry.client.tsx

@@ -1,11 +1,11 @@
-import { RemixBrowser } from '@remix-run/react'
 import { startTransition } from 'react'
 import { hydrateRoot } from 'react-dom/client'
+import { HydratedRouter } from 'react-router/dom'
 
 if (ENV.MODE === 'production' && ENV.SENTRY_DSN) {
 	void import('./utils/monitoring.client.tsx').then(({ init }) => init())
 }
 
 startTransition(() => {
-	hydrateRoot(document, <RemixBrowser />)
+	hydrateRoot(document, <HydratedRouter />)
 })

app/entry.server.tsx

@@ -1,21 +1,22 @@
 import { PassThrough } from 'node:stream'
+import { createReadableStreamFromReadable } from '@react-router/node'
+
+import * as Sentry from '@sentry/node'
+import chalk from 'chalk'
+import { isbot } from 'isbot'
+import { renderToPipeableStream } from 'react-dom/server'
 import {
-	createReadableStreamFromReadable,
+	ServerRouter,
 	type LoaderFunctionArgs,
 	type ActionFunctionArgs,
 	type HandleDocumentRequestFunction,
-} from '@remix-run/node'
-import { RemixServer } from '@remix-run/react'
-import * as Sentry from '@sentry/remix'
-import chalk from 'chalk'
-import { isbot } from 'isbot'
-import { renderToPipeableStream } from 'react-dom/server'
+} from 'react-router'
 import { getEnv, init } from './utils/env.server.ts'
 import { getInstanceInfo } from './utils/litefs.server.ts'
 import { NonceProvider } from './utils/nonce-provider.ts'
 import { makeTimings } from './utils/timing.server.ts'
 
-const ABORT_DELAY = 5000
+export const streamTimeout = 5000
 
 init()
 global.ENV = getEnv()
@@ -27,7 +28,7 @@ export default async function handleRequest(...args: DocRequestArgs) {
 		request,
 		responseStatusCode,
 		responseHeaders,
-		remixContext,
+		reactRouterContext,
 		loadContext,
 	] = args
 	const { currentInstance, primaryInstance } = await getInstanceInfo()
@@ -53,7 +54,11 @@ export default async function handleRequest(...args: DocRequestArgs) {
 
 		const { pipe, abort } = renderToPipeableStream(
 			<NonceProvider value={nonce}>
-				<RemixServer context={remixContext} url={request.url} />
+				<ServerRouter
+					nonce={nonce}
+					context={reactRouterContext}
+					url={request.url}
+				/>
 			</NonceProvider>,
 			{
 				[callbackName]: () => {
@@ -78,7 +83,7 @@ export default async function handleRequest(...args: DocRequestArgs) {
 			},
 		)
 
-		setTimeout(abort, ABORT_DELAY)
+		setTimeout(abort, streamTimeout + 5000)
 	})
 }
 
@@ -103,12 +108,7 @@ export function handleError(
 	}
 	if (error instanceof Error) {
 		console.error(chalk.red(error.stack))
-		void Sentry.captureRemixServerException(
-			error,
-			'remix.server',
-			request,
-			true,
-		)
+		void Sentry.captureException(error)
 	} else {
 		console.error(error)
 		Sentry.captureException(error)

app/root.tsx

@@ -1,11 +1,11 @@
+import { wrapUseRoutesV7 } from '@sentry/react'
+import { useRef } from 'react'
 import {
-	json,
+	data,
 	type LoaderFunctionArgs,
 	type HeadersFunction,
 	type LinksFunction,
 	type MetaFunction,
-} from '@remix-run/node'
-import {
 	Form,
 	Link,
 	Links,
@@ -16,9 +16,7 @@ import {
 	useLoaderData,
 	useMatches,
 	useSubmit,
-} from '@remix-run/react'
-import { withSentry } from '@sentry/remix'
-import { useRef } from 'react'
+} from 'react-router'
 import { HoneypotProvider } from 'remix-utils/honeypot/react'
 import appleTouchIconAssetUrl from './assets/favicons/apple-touch-icon.png'
 import faviconAssetUrl from './assets/favicons/favicon.svg'
@@ -121,7 +119,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
 	const { toast, headers: toastHeaders } = await getToast(request)
 	const honeyProps = honeypot.getInputProps()
 
-	return json(
+	return data(
 		{
 			user,
 			requestInfo: {
@@ -161,7 +159,8 @@ function Document({
 	children: React.ReactNode
 	nonce: string
 	theme?: Theme
-	env?: Record<string, string>
+	env?: Record<string, string | undefined>
+	allowIndexing?: boolean
 }) {
 	const allowIndexing = ENV.ALLOW_INDEXING !== 'false'
 	return (
@@ -271,7 +270,7 @@ function AppWithProviders() {
 	)
 }
 
-export default withSentry(AppWithProviders)
+export default wrapUseRoutesV7(AppWithProviders)
 
 function UserDropdown() {
 	const user = useUser()
@@ -317,9 +316,9 @@ function UserDropdown() {
 					<DropdownMenuItem
 						asChild
 						// this prevents the menu from closing before the form submission is completed
-						onSelect={(event) => {
+						onSelect={async (event) => {
 							event.preventDefault()
-							submit(formRef.current)
+							await submit(formRef.current)
 						}}
 					>
 						<Form action="/logout" method="POST" ref={formRef}>

app/routes.ts

@@ -0,0 +1,21 @@
+import { type RouteConfig } from '@react-router/dev/routes'
+import { remixRoutesOptionAdapter } from '@react-router/remix-routes-option-adapter'
+import { flatRoutes } from 'remix-flat-routes'
+
+export default remixRoutesOptionAdapter((defineRoutes) => {
+	return flatRoutes('routes', defineRoutes, {
+		ignoredRouteFiles: [
+			'.*',
+			'**/*.css',
+			'**/*.test.{js,jsx,ts,tsx}',
+			'**/__*.*',
+			// This is for server-side utilities you want to colocate
+			// next to your routes without making an additional
+			// directory. If you need a route that includes "server" or
+			// "client" in the filename, use the escape brackets like:
+			// my-route.[server].tsx
+			'**/*.server.*',
+			'**/*.client.*',
+		],
+	})
+}) satisfies RouteConfig

app/routes/$.tsx

@@ -5,7 +5,7 @@
 // ensure the user gets the right status code and we can display a nicer error
 // message for them than the Remix and/or browser default.
 
-import { Link, useLocation } from '@remix-run/react'
+import { Link, useLocation } from 'react-router'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'
 

app/routes/_auth+/auth.$provider.callback.ts

@@ -1,4 +1,4 @@
-import { redirect, type LoaderFunctionArgs } from '@remix-run/node'
+import { redirect, type LoaderFunctionArgs } from 'react-router'
 import {
 	authenticator,
 	getSessionExpirationDate,
@@ -39,8 +39,16 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
 	const authResult = await authenticator
 		.authenticate(providerName, request, { throwOnError: true })
 		.then(
-			(data) => ({ success: true, data }) as const,
-			(error) => ({ success: false, error }) as const,
+			(data) =>
+				({
+					success: true,
+					data,
+				}) as const,
+			(error) =>
+				({
+					success: false,
+					error,
+				}) as const,
 		)
 
 	if (!authResult.success) {