Fix tsc after react-router v7

app/routes/dict.$figureKey.analyze.tsx

@@ -1,4 +1,4 @@
-import type { LoaderFunction } from "react-router";
+import { data, type LoaderFunction } from "react-router";
 
 import { prisma } from "~/db.server";
 import { badgeFigureSelect } from "~/features/dictionary/badgeFigure";
@@ -74,7 +74,7 @@ export const loader: LoaderFunction = async ({ params }) => {
   const figure = await analyzeFigureComponents(figureKey);
 
   if (!figure) {
-    return json<FigureComponentsAnalysisLoaderData>(
+    return data<FigureComponentsAnalysisLoaderData>(
       {
         error: `No figure ${JSON.stringify(
           figureKey,
@@ -84,7 +84,7 @@ export const loader: LoaderFunction = async ({ params }) => {
     );
   }
 
-  return json<FigureComponentsAnalysisLoaderData>({
+  return data<FigureComponentsAnalysisLoaderData>({
     figure,
   });
 };

app/routes/dict.$figureKey.preview.tsx

@@ -29,7 +29,7 @@ export const loader: LoaderFunction = async ({ params }) => {
     );
   }
 
-  return json<DictPreviewLoaderData>({
+  return {
     figure,
-  });
+  };
 };

app/routes/dict.$figureKey.tsx

@@ -1,5 +1,6 @@
 import type { LinksFunction, LoaderFunction, MetaFunction } from "react-router";
-import { data ,
+import {
+  data,
   isRouteErrorResponse,
   useLoaderData,
   useRouteError,
@@ -28,7 +29,12 @@ type LoaderData =
 
 export const meta: MetaFunction<typeof loader> = (a) => [
   {
-    title: getPageTitle(a.params.figureKey, a.data.searchedFigure),
+    title: getPageTitle(
+      a.params.figureKey,
+      a.data && "searchedFigure" in a.data
+        ? (a.data.searchedFigure as DictionaryPageSearchedFigure)
+        : null,
+    ),
   },
 ];
 
@@ -57,14 +63,14 @@ export const loader: LoaderFunction = async ({ params }) => {
     );
   }
 
-  return data<LoaderData>({
+  return {
     searchedFigure,
-  });
+  };
 };
 
 function getPageTitle(
   figureKey: string | null | undefined,
-  figure: DictionaryPageSearchedFigure,
+  figure: DictionaryPageSearchedFigure | null,
 ): unknown | string {
   if ([...(figureKey || "")].length === 1)
     return `${figureKey} - definition, components, readings, and more | Kanjisense`;

app/routes/join.tsx

@@ -4,7 +4,14 @@ import type {
   LoaderFunctionArgs,
   MetaFunction,
 } from "react-router";
-import { redirect, data , Form, Link, useActionData, useSearchParams } from "react-router";
+import {
+  redirect,
+  data,
+  Form,
+  Link,
+  useActionData,
+  useSearchParams,
+} from "react-router";
 
 import { createUser, getUserByEmail } from "~/models/user.server";
 import { createUserSession, getUserId } from "~/session.server";
@@ -76,13 +83,23 @@ export default function Join() {
   const passwordRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
+    if (!(actionData && "errors" in actionData)) return;
+
     if (actionData?.errors?.email) {
       emailRef.current?.focus();
     } else if (actionData?.errors?.password) {
       passwordRef.current?.focus();
     }
   }, [actionData]);
 
+  const errors =
+    actionData && "errors" in actionData
+      ? actionData.errors
+      : {
+          email: null,
+          password: null,
+        };
+
   return (
     <div className="flex min-h-full flex-col justify-center">
       <div className="mx-auto w-full max-w-md px-8">
@@ -104,13 +121,13 @@ export default function Join() {
                 name="email"
                 type="email"
                 autoComplete="email"
-                aria-invalid={actionData?.errors?.email ? true : undefined}
+                aria-invalid={errors?.email ? true : undefined}
                 aria-describedby="email-error"
                 className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
               />
-              {actionData?.errors?.email ? (
+              {errors?.email ? (
                 <div className="pt-1 text-red-700" id="email-error">
-                  {actionData.errors.email}
+                  {errors.email}
                 </div>
               ) : null}
             </div>
@@ -130,13 +147,13 @@ export default function Join() {
                 name="password"
                 type="password"
                 autoComplete="new-password"
-                aria-invalid={actionData?.errors?.password ? true : undefined}
+                aria-invalid={errors.password ? true : undefined}
                 aria-describedby="password-error"
                 className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
               />
-              {actionData?.errors?.password ? (
+              {errors.password ? (
                 <div className="pt-1 text-red-700" id="password-error">
-                  {actionData.errors.password}
+                  {errors.password}
                 </div>
               ) : null}
             </div>

app/routes/login.tsx

@@ -4,7 +4,14 @@ import type {
   LoaderFunctionArgs,
   MetaFunction,
 } from "react-router";
-import { redirect, data , Form, Link, useActionData, useSearchParams } from "react-router";
+import {
+  redirect,
+  data,
+  Form,
+  Link,
+  useActionData,
+  useSearchParams,
+} from "react-router";
 
 import { verifyLogin } from "~/models/user.server";
 import { createUserSession, getUserId } from "~/session.server";
@@ -70,10 +77,18 @@ export default function LoginPage() {
   const emailRef = useRef<HTMLInputElement>(null);
   const passwordRef = useRef<HTMLInputElement>(null);
 
+  const errors =
+    actionData && "errors" in actionData
+      ? actionData.errors
+      : {
+          email: null,
+          password: null,
+        };
+
   useEffect(() => {
-    if (actionData?.errors?.email) {
+    if (errors?.email) {
       emailRef.current?.focus();
-    } else if (actionData?.errors?.password) {
+    } else if (errors?.password) {
       passwordRef.current?.focus();
     }
   }, [actionData]);
@@ -99,13 +114,13 @@ export default function LoginPage() {
                 name="email"
                 type="email"
                 autoComplete="email"
-                aria-invalid={actionData?.errors?.email ? true : undefined}
+                aria-invalid={errors?.email ? true : undefined}
                 aria-describedby="email-error"
                 className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
               />
-              {actionData?.errors?.email ? (
+              {errors?.email ? (
                 <div className="pt-1 text-red-700" id="email-error">
-                  {actionData.errors.email}
+                  {errors.email}
                 </div>
               ) : null}
             </div>
@@ -125,13 +140,13 @@ export default function LoginPage() {
                 name="password"
                 type="password"
                 autoComplete="current-password"
-                aria-invalid={actionData?.errors?.password ? true : undefined}
+                aria-invalid={errors?.password ? true : undefined}
                 aria-describedby="password-error"
                 className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
               />
-              {actionData?.errors?.password ? (
+              {errors?.password ? (
                 <div className="pt-1 text-red-700" id="password-error">
-                  {actionData.errors.password}
+                  {errors.password}
                 </div>
               ) : null}
             </div>

app/routes/notes.new.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
 import type { ActionFunctionArgs } from "react-router";
-import { data, redirect , Form, useActionData } from "react-router";
+import { data, redirect, Form, useActionData } from "react-router";
 
 import { createNote } from "~/models/note.server";
 import { requireUserId } from "~/session.server";
@@ -37,13 +37,23 @@ export default function NewNotePage() {
   const bodyRef = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
+    if (!(actionData && "errors" in actionData)) return;
+
     if (actionData?.errors?.title) {
       titleRef.current?.focus();
     } else if (actionData?.errors?.body) {
       bodyRef.current?.focus();
     }
   }, [actionData]);
 
+  const errors =
+    actionData && "errors" in actionData
+      ? actionData.errors
+      : {
+          title: null,
+          body: null,
+        };
+
   return (
     <Form
       method="post"
@@ -61,15 +71,13 @@ export default function NewNotePage() {
             ref={titleRef}
             name="title"
             className="flex-1 rounded-md border-2 border-blue-500 px-3 text-lg leading-loose"
-            aria-invalid={actionData?.errors?.title ? true : undefined}
-            aria-errormessage={
-              actionData?.errors?.title ? "title-error" : undefined
-            }
+            aria-invalid={errors?.title ? true : undefined}
+            aria-errormessage={errors?.title ? "title-error" : undefined}
           />
         </label>
-        {actionData?.errors?.title ? (
+        {errors?.title ? (
           <div className="pt-1 text-red-700" id="title-error">
-            {actionData.errors.title}
+            {errors.title}
           </div>
         ) : null}
       </div>
@@ -82,15 +90,13 @@ export default function NewNotePage() {
             name="body"
             rows={8}
             className="w-full flex-1 rounded-md border-2 border-blue-500 px-3 py-2 text-lg leading-6"
-            aria-invalid={actionData?.errors?.body ? true : undefined}
-            aria-errormessage={
-              actionData?.errors?.body ? "body-error" : undefined
-            }
+            aria-invalid={errors?.body ? true : undefined}
+            aria-errormessage={errors?.body ? "body-error" : undefined}
           />
         </label>
-        {actionData?.errors?.body ? (
+        {errors?.body ? (
           <div className="pt-1 text-red-700" id="body-error">
-            {actionData.errors.body}
+            {errors.body}
           </div>
         ) : null}
       </div>

tsconfig.json

@@ -3,7 +3,7 @@
   "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2021"],
-    "types": ["@remix-run/node", "vite/client", "vitest/globals"],
+    "types": ["@react-router/node", "vite/client", "vitest/globals"],
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",

vite.config.ts

@@ -2,26 +2,6 @@ import { reactRouter } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 
-declare module "@remix-run/node" {
-  interface Future {
-    v3_singleFetch: true;
-  }
-}
-
 export default defineConfig({
-  plugins: [
-    reactRouter({
-      future: {
-        unstable_optimizeDeps: true,
-        v3_fetcherPersist: true,
-        v3_relativeSplatPath: true,
-        v3_throwAbortReason: true,
-        v3_singleFetch: true,
-        v3_lazyRouteDiscovery: true,
-      },
-      ignoredRouteFiles: ["**/.*", "**/*.test.{ts,tsx}"],
-      serverModuleFormat: "cjs",
-    }),
-    tsconfigPaths(),
-  ],
+  plugins: [reactRouter(), tsconfigPaths()],
 });