Feat/migrate to react router 7

app/components/error-boundary.tsx

@@ -1,9 +1,4 @@
-import {
-	type ErrorResponse,
-	isRouteErrorResponse,
-	useParams,
-	useRouteError,
-} from '@remix-run/react'
+import { type ErrorResponse, isRouteErrorResponse, useParams, useRouteError } from 'react-router';
 import { captureRemixErrorBoundaryError } from '@sentry/remix'
 import { type ReactElement } from 'react'
 import { getErrorMessage } from '#app/utils/misc.tsx'

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,4 +1,4 @@
-import { Form, useSearchParams, useSubmit } from '@remix-run/react'
+import { Form, useSearchParams, useSubmit } from 'react-router';
 import { useId } from 'react'
 import { useDebounce, useIsPending } from '#app/utils/misc.tsx'
 import { Icon } from './ui/icon.tsx'

app/entry.client.tsx

@@ -1,4 +1,4 @@
-import { RemixBrowser } from '@remix-run/react'
+import { HydratedRouter } from 'react-router/dom';
 import { startTransition } from 'react'
 import { hydrateRoot } from 'react-dom/client'
 
@@ -7,5 +7,5 @@ if (ENV.MODE === 'production' && ENV.SENTRY_DSN) {
 }
 
 startTransition(() => {
-	hydrateRoot(document, <RemixBrowser />)
+	hydrateRoot(document, <HydratedRouter />)
 })

app/entry.server.tsx

@@ -1,11 +1,13 @@
 import { PassThrough } from 'node:stream'
+import { createReadableStreamFromReadable } from '@react-router/node';
+
 import {
-	createReadableStreamFromReadable,
-	type LoaderFunctionArgs,
-	type ActionFunctionArgs,
-	type HandleDocumentRequestFunction,
-} from '@remix-run/node'
-import { RemixServer } from '@remix-run/react'
+    type LoaderFunctionArgs,
+    type ActionFunctionArgs,
+    type HandleDocumentRequestFunction,
+} from 'react-router';
+
+import { ServerRouter } from 'react-router';
 import * as Sentry from '@sentry/remix'
 import chalk from 'chalk'
 import { isbot } from 'isbot'
@@ -15,7 +17,7 @@ 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 +29,7 @@ export default async function handleRequest(...args: DocRequestArgs) {
 		request,
 		responseStatusCode,
 		responseHeaders,
-		remixContext,
+		reactRouterContext,
 		loadContext,
 	] = args
 	const { currentInstance, primaryInstance } = await getInstanceInfo()
@@ -53,7 +55,7 @@ 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,8 +80,8 @@ export default async function handleRequest(...args: DocRequestArgs) {
 			},
 		)
 
-		setTimeout(abort, ABORT_DELAY)
-	})
+		setTimeout(abort, streamTimeout + 5000)
+	});
 }
 
 export async function handleDataRequest(response: Response) {

app/root.tsx

@@ -1,11 +1,11 @@
+import { withSentry } from '@sentry/remix'
+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 (

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,14 @@ 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) {

app/routes/_auth+/auth.$provider.ts → app/routes/_auth+/auth_.$provider.ts

@@ -1,4 +1,4 @@
-import { redirect, type ActionFunctionArgs } from '@remix-run/node'
+import { redirect, type ActionFunctionArgs } from 'react-router';
 import { authenticator } from '#app/utils/auth.server.ts'
 import { handleMockAction } from '#app/utils/connections.server.ts'
 import { ProviderNameSchema } from '#app/utils/connections.tsx'

app/routes/_auth+/forgot-password.tsx

@@ -2,13 +2,8 @@ import { getFormProps, getInputProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
 import * as E from '@react-email/components'
-import {
-	json,
-	redirect,
-	type ActionFunctionArgs,
-	type MetaFunction,
-} from '@remix-run/node'
-import { Link, useFetcher } from '@remix-run/react'
+import { data, redirect, type ActionFunctionArgs, type MetaFunction } from 'react-router';
+import { Link, useFetcher } from 'react-router';
 import { HoneypotInputs } from 'remix-utils/honeypot/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
@@ -54,7 +49,7 @@ export async function action({ request }: ActionFunctionArgs) {
 		async: true,
 	})
 	if (submission.status !== 'success') {
-		return json(
+		return data(
 			{ result: submission.reply() },
 			{ status: submission.status === 'error' ? 400 : 200 },
 		)
@@ -84,7 +79,7 @@ export async function action({ request }: ActionFunctionArgs) {
 	if (response.status === 'success') {
 		return redirect(redirectTo.toString())
 	} else {
-		return json(
+		return data(
 			{ result: submission.reply({ formErrors: [response.error.message] }) },
 			{ status: 500 },
 		)

app/routes/_auth+/login.server.ts

@@ -1,5 +1,5 @@
 import { invariant } from '@epic-web/invariant'
-import { redirect } from '@remix-run/node'
+import { redirect } from 'react-router';
 import { safeRedirect } from 'remix-utils/safe-redirect'
 import { twoFAVerificationType } from '#app/routes/settings+/profile.two-factor.tsx'
 import { getUserId, sessionKey } from '#app/utils/auth.server.ts'

app/routes/_auth+/login.tsx

@@ -1,13 +1,8 @@
 import { getFormProps, getInputProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
-import {
-	json,
-	type ActionFunctionArgs,
-	type LoaderFunctionArgs,
-	type MetaFunction,
-} from '@remix-run/node'
-import { Form, Link, useActionData, useSearchParams } from '@remix-run/react'
+import { data, type ActionFunctionArgs, type LoaderFunctionArgs, type MetaFunction } from 'react-router';
+import { Form, Link, useActionData, useSearchParams } from 'react-router';
 import { HoneypotInputs } from 'remix-utils/honeypot/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
@@ -37,7 +32,7 @@ const LoginFormSchema = z.object({
 
 export async function loader({ request }: LoaderFunctionArgs) {
 	await requireAnonymous(request)
-	return json({})
+	return {}
 }
 
 export async function action({ request }: ActionFunctionArgs) {
@@ -64,7 +59,7 @@ export async function action({ request }: ActionFunctionArgs) {
 	})
 
 	if (submission.status !== 'success' || !submission.value.session) {
-		return json(
+		return data(
 			{ result: submission.reply({ hideFields: ['password'] }) },
 			{ status: submission.status === 'error' ? 400 : 200 },
 		)

app/routes/_auth+/logout.tsx

@@ -1,4 +1,4 @@
-import { redirect, type ActionFunctionArgs } from '@remix-run/node'
+import { redirect, type ActionFunctionArgs } from 'react-router';
 import { logout } from '#app/utils/auth.server.ts'
 
 export async function loader() {

app/routes/_auth+/onboarding.server.ts

@@ -1,5 +1,5 @@
 import { invariant } from '@epic-web/invariant'
-import { redirect } from '@remix-run/node'
+import { redirect } from 'react-router';
 import { verifySessionStorage } from '#app/utils/verification.server.ts'
 import { onboardingEmailSessionKey } from './onboarding.tsx'
 import { type VerifyFunctionArgs } from './verify.server.ts'

app/routes/_auth+/onboarding.tsx

@@ -1,18 +1,13 @@
 import { getFormProps, getInputProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import {
-	json,
-	redirect,
-	type LoaderFunctionArgs,
-	type ActionFunctionArgs,
-	type MetaFunction,
-} from '@remix-run/node'
-import {
-	Form,
-	useActionData,
-	useLoaderData,
-	useSearchParams,
-} from '@remix-run/react'
+    data,
+    redirect,
+    type LoaderFunctionArgs,
+    type ActionFunctionArgs,
+    type MetaFunction,
+} from 'react-router';
+import { Form, useActionData, useLoaderData, useSearchParams } from 'react-router';
 import { HoneypotInputs } from 'remix-utils/honeypot/react'
 import { safeRedirect } from 'remix-utils/safe-redirect'
 import { z } from 'zod'
@@ -61,7 +56,7 @@ async function requireOnboardingEmail(request: Request) {
 
 export async function loader({ request }: LoaderFunctionArgs) {
 	const email = await requireOnboardingEmail(request)
-	return json({ email })
+	return { email }
 }
 
 export async function action({ request }: ActionFunctionArgs) {
@@ -93,7 +88,7 @@ export async function action({ request }: ActionFunctionArgs) {
 	})
 
 	if (submission.status !== 'success' || !submission.value.session) {
-		return json(
+		return data(
 			{ result: submission.reply() },
 			{ status: submission.status === 'error' ? 400 : 200 },
 		)

app/routes/_auth+/onboarding_.$provider.server.ts

@@ -1,5 +1,5 @@
 import { invariant } from '@epic-web/invariant'
-import { redirect } from '@remix-run/node'
+import { redirect } from 'react-router';
 import { verifySessionStorage } from '#app/utils/verification.server.ts'
 import { onboardingEmailSessionKey } from './onboarding.tsx'
 import { type VerifyFunctionArgs } from './verify.server.ts'

app/routes/_auth+/onboarding_.$provider.tsx

@@ -6,19 +6,13 @@ import {
 } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import {
-	redirect,
-	json,
-	type ActionFunctionArgs,
-	type LoaderFunctionArgs,
-	type MetaFunction,
-} from '@remix-run/node'
-import {
-	type Params,
-	Form,
-	useActionData,
-	useLoaderData,
-	useSearchParams,
-} from '@remix-run/react'
+    redirect,
+    data,
+    type ActionFunctionArgs,
+    type LoaderFunctionArgs,
+    type MetaFunction,
+} from 'react-router';
+import { type Params, Form, useActionData, useLoaderData, useSearchParams } from 'react-router';
 import { safeRedirect } from 'remix-utils/safe-redirect'
 import { z } from 'zod'
 import { CheckboxField, ErrorList, Field } from '#app/components/forms.tsx'
@@ -95,15 +89,15 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
 	const formError = connectionSession.get(authenticator.sessionErrorKey)
 	const hasError = typeof formError === 'string'
 
-	return json({
+	return {
 		email,
 		status: 'idle',
 		submission: {
 			status: hasError ? 'error' : undefined,
 			initialValue: prefilledProfile ?? {},
 			error: { '': hasError ? [formError] : [] },
 		} as SubmissionResult,
-	})
+	}
 }
 
 export async function action({ request, params }: ActionFunctionArgs) {
@@ -143,7 +137,7 @@ export async function action({ request, params }: ActionFunctionArgs) {
 	})
 
 	if (submission.status !== 'success') {
-		return json(
+		return data(
 			{ result: submission.reply() },
 			{ status: submission.status === 'error' ? 400 : 200 },
 		)

app/routes/_auth+/reset-password.server.ts

@@ -1,5 +1,5 @@
 import { invariant } from '@epic-web/invariant'
-import { json, redirect } from '@remix-run/node'
+import { data, redirect } from 'react-router';
 import { prisma } from '#app/utils/db.server.ts'
 import { verifySessionStorage } from '#app/utils/verification.server.ts'
 import { resetPasswordUsernameSessionKey } from './reset-password.tsx'
@@ -18,7 +18,7 @@ export async function handleVerification({ submission }: VerifyFunctionArgs) {
 	// we don't want to say the user is not found if the email is not found
 	// because that would allow an attacker to check if an email is registered
 	if (!user) {
-		return json(
+		return data(
 			{ result: submission.reply({ fieldErrors: { code: ['Invalid code'] } }) },
 			{ status: 400 },
 		)