V2 future stuff

app/root.tsx

@@ -11,6 +11,7 @@ import fontStyle from "@fontsource/plus-jakarta-sans/index.css";
 import Forbidden from "../components/Forbidden.js";
 import globalStyles from "../index.css";
 import {
+  isRouteErrorResponse,
   Links,
   LiveReload,
   Meta,
@@ -18,7 +19,9 @@ import {
   Scripts,
   useCatch,
   useLoaderData,
+  useRouteError,
 } from "@remix-run/react";
+import { type ErrorResponse } from "@remix-run/router";
 import { LinksFunction } from "@remix-run/cloudflare";
 import Login from "../components/Login.js";
 import Navigation from "../components/Navigation.js";
@@ -28,7 +31,28 @@ import theme from "../theme.js";
 import { withEmotionCache } from "@emotion/react";
 
 export function CatchBoundary() {
-  const { status } = useCatch();
+  const error = useRouteError() as ErrorResponse;
+
+  if (!isRouteErrorResponse(error))
+    return getMarkup(
+      { hide: true },
+      <Container maxW="container.lg" pt="8vh" textAlign="left">
+        <Heading size="4xl">???</Heading>
+        <br />
+        <Text fontSize="xl">Something bad happened!</Text>
+        <br />
+        <br />
+        <br />
+        <Text>Details: {error}</Text>
+        <br />
+        <br />
+        <Link color="#646cff" onClick={location.reload}>
+          Refresh
+        </Link>
+      </Container>
+    );
+
+  const { status } = error;
 
   switch (status) {
     case 303:
@@ -98,9 +122,7 @@ export async function loader({
 }
 
 export function meta() {
-  return {
-    title: "Car Crushers",
-  };
+  return [{ title: "Car Crushers" }];
 }
 
 function getMarkup(

app/routes/admin-application.tsx

@@ -9,9 +9,11 @@ import {
 } from "@chakra-ui/react";
 
 export function meta() {
-  return {
+  return [
+    {
       title: "Admin Application - Car Crushers",
-  };
+    },
+  ];
 }
 
 export default function () {

app/routes/appeals.tsx

@@ -53,9 +53,11 @@ export async function loader({ context }: { context: RequestContext }) {
 }
 
 export function meta() {
-  return {
+  return [
+    {
       title: "Appeals - Car Crushers",
-  };
+    },
+  ];
 }
 
 export default function () {

app/routes/mod-queue.tsx

@@ -78,9 +78,11 @@ export async function loader({ context }: { context: RequestContext }) {
 }
 
 export function meta() {
-  return {
+  return [
+    {
       title: "Moderation Queue - Car Crushers",
-  };
+    },
+  ];
 }
 
 export default function () {

app/routes/privacy.tsx

@@ -1,9 +1,11 @@
 import { Container, Heading, Link, Text } from "@chakra-ui/react";
 
 export function meta() {
-  return {
-    title: "Privacy Police - Car Crushers",
-  };
+  return [
+    {
+      title: "Privacy Policy - Car Crushers",
+    },
+  ];
 }
 
 export default function () {

app/routes/report.tsx

@@ -28,9 +28,11 @@ export async function loader({
 }
 
 export function meta() {
-  return {
+  return [
+    {
       title: "Report an Exploiter - Car Crushers",
-  };
+    },
+  ];
 }
 
 export default function () {

app/routes/support.tsx

@@ -13,9 +13,11 @@ import {
 } from "@chakra-ui/react";
 
 export function meta() {
-  return {
+  return [
+    {
       title: "Support - Car Crushers",
-  };
+    },
+  ];
 }
 
 export default function () {

app/routes/team.tsx

@@ -12,9 +12,11 @@ import {
 import team from "../../data/team.json";
 
 export function meta() {
-  return {
+  return [
+    {
       title: "Our Team - Car Crushers",
-  };
+    },
+  ];
 }
 
 export default function () {

app/routes/terms.tsx

@@ -1,9 +1,11 @@
 import { Container, Heading, Link, Text } from "@chakra-ui/react";
 
 export function meta() {
-  return {
+  return [
+    {
       title: "Terms and Conditions - Car Crushers",
-  };
+    },
+  ];
 }
 
 export default function () {

remix.config.js

@@ -1,5 +1,8 @@
 export default {
   future: {
+    v2_errorBoundary: true,
+    v2_meta: true,
+    v2_normalizeFormMethod: true,
     v2_routeConvention: true,
   },
   server: "./server.ts",