fix: address internal type errors

apps/test-app/app/root.tsx

@@ -7,8 +7,9 @@ import {
   Outlet,
   Scripts,
   ScrollRestoration,
-  useCatch,
+  isRouteErrorResponse,
   useLocation,
+  useRouteError,
 } from "@remix-run/react";
 import * as React from "react";
 import darkStylesUrl from "~/styles/dark.css";
@@ -122,49 +123,48 @@ function Layout({ children }: React.PropsWithChildren<{}>) {
   );
 }
 
-export function CatchBoundary() {
-  let caught = useCatch();
+export function ErrorBoundary() {
+  const error = useRouteError();
 
-  let message;
-  switch (caught.status) {
-    case 401:
-      message = (
-        <p>
-          Oops! Looks like you tried to visit a page that you do not have access
-          to.
-        </p>
-      );
-      break;
-    case 404:
-      message = (
-        <p>Oops! Looks like you tried to visit a page that does not exist.</p>
-      );
-      break;
+  if (isRouteErrorResponse(error)) {
+    let message;
+    switch (error.status) {
+      case 401:
+        message = (
+          <p>
+            Oops! Looks like you tried to visit a page that you do not have
+            access to.
+          </p>
+        );
+        break;
+      case 404:
+        message = (
+          <p>Oops! Looks like you tried to visit a page that does not exist.</p>
+        );
+        break;
 
-    default:
-      throw new Error(caught.data || caught.statusText);
-  }
+      default:
+        throw new Error(error.data || error.statusText);
+    }
 
-  return (
-    <Document title={`${caught.status} ${caught.statusText}`}>
-      <Layout>
-        <h1>
-          {caught.status}: {caught.statusText}
-        </h1>
-        {message}
-      </Layout>
-    </Document>
-  );
-}
+    return (
+      <Document title={`${error.status} ${error.statusText}`}>
+        <Layout>
+          <h1>
+            {error.status}: {error.statusText}
+          </h1>
+          {message}
+        </Layout>
+      </Document>
+    );
+  }
 
-export function ErrorBoundary({ error }: { error: Error }) {
-  console.error(error);
   return (
     <Document title="Error!">
       <Layout>
         <div>
           <h1>There was an error</h1>
-          <p>{error.message}</p>
+          <p>{(error as any).message ?? "Unknown error"}</p>
           <hr />
           <p>
             Hey, developer, you should replace this with what you want your

apps/test-app/app/routes/index.tsx

@@ -48,10 +48,13 @@ export let loader = (args: DataFunctionArgs) => {
 
 // https://remix.run/docs/en/v1/route/meta
 export let meta: MetaFunction = () => {
-  return {
-    title: "Remix Starter",
-    description: "Welcome to remix!",
-  };
+  return [
+    { title: "Remix Starter" },
+    {
+      name: "description",
+      content: "Welcome to remix!",
+    },
+  ];
 };
 
 // https://remix.run/docs/en/v1/guides/routing#index-routes

apps/test-app/app/routes/submission.fetcher.form.tsx

@@ -8,7 +8,7 @@ const schema = yup.object({});
 const validator = withYup(schema);
 
 export default function FrontendValidation() {
-  const fetcher = useFetcher();
+  const fetcher = useFetcher<typeof import("./submission.fetcher")["action"]>();
   return (
     <ValidatedForm
       validator={validator}

apps/test-app/app/routes/submission.helper-with-fetcher.tsx

@@ -11,10 +11,15 @@ const validator = withYup(schema);
 
 export default function FrontendValidation() {
   const { submit } = useFormContext("test-form");
-  const fetcher = useFetcher();
+  const fetcher =
+    useFetcher<
+      typeof import("./submission.helper-with-action.action")["action"]
+    >();
   return (
     <>
-      {fetcher.data?.message && <p>From fetcher: {fetcher.data.message}</p>}
+      {fetcher.data && "message" in fetcher.data && fetcher.data?.message && (
+        <p>From fetcher: {fetcher.data.message}</p>
+      )}
       <ValidatedForm
         validator={validator}
         method="post"

apps/test-app/app/routes/submission.method.tsx

@@ -13,7 +13,7 @@ export const action = ({ request }: DataFunctionArgs) =>
 
 export default function FrontendValidation() {
   const data = useActionData<typeof action>();
-  const fetcher = useFetcher();
+  const fetcher = useFetcher<typeof action>();
 
   return (
     <>

apps/test-app/app/routes/validation-fetcher.tsx

@@ -23,10 +23,12 @@ export const action = async ({ request }: DataFunctionArgs) => {
 };
 
 export default function FrontendValidation() {
-  const fetcher = useFetcher();
+  const fetcher = useFetcher<typeof action>();
   return (
     <>
-      {fetcher.data?.message && <h1>{fetcher.data.message}</h1>}
+      {fetcher.data && "message" in fetcher.data && fetcher.data?.message && (
+        <h1>{fetcher.data.message}</h1>
+      )}
       <Input name="firstName" label="First Name" form="test-form" />
       <ValidatedForm
         validator={validator}

apps/test-app/app/routes/validation-focus-custom.tsx

@@ -36,7 +36,7 @@ const ControlledInput = ({ name, label }: { name: string; label: string }) => {
 };
 
 export default function FrontendValidation() {
-  const actionData = useActionData();
+  const actionData = useActionData() as any;
   return (
     <ValidatedForm validator={validator} method="post">
       {actionData && <h1>{actionData.message}</h1>}

apps/test-app/app/routes/validation-nofocus.tsx

@@ -21,7 +21,7 @@ const schema = yup.object({
 const validator = withYup(schema);
 
 export default function FrontendValidation() {
-  const actionData = useActionData();
+  const actionData = useActionData() as any;
   return (
     <ValidatedForm validator={validator} method="post" disableFocusOnError>
       {actionData && <h1>{actionData.message}</h1>}

apps/test-app/package.json

@@ -15,9 +15,9 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.5.0",
-    "@remix-run/node": "^1.16.1",
-    "@remix-run/react": "^1.16.1",
-    "@remix-run/server-runtime": "^1.16.1",
+    "@remix-run/node": "^2.0.1",
+    "@remix-run/react": "^2.0.1",
+    "@remix-run/server-runtime": "^2.0.1",
     "@remix-validated-form/with-yup": "*",
     "@remix-validated-form/with-zod": "*",
     "cypress-file-upload": "^5.0.8",
@@ -30,8 +30,8 @@
     "zod-form-data": "*"
   },
   "devDependencies": {
-    "@remix-run/dev": "^1.16.1",
-    "@remix-run/serve": "^1.16.1",
+    "@remix-run/dev": "^2.0.1",
+    "@remix-run/serve": "^2.0.1",
     "@testing-library/cypress": "^8.0.2",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.3",

packages/remix-validated-form/src/internal/hooks.ts

@@ -71,7 +71,7 @@ export const useDefaultValuesFromLoader = ({
         (match) =>
           match.data && typeof match.data === "object" && dataKey in match.data
       );
-    return match?.data[dataKey];
+    return (match?.data as any)[dataKey];
   }
 
   return null;