diff --git a/app/modules/auth/user.ts b/app/modules/auth/user.ts
index c133963a0..458f5c841 100644
--- a/app/modules/auth/user.ts
+++ b/app/modules/auth/user.ts
@@ -6,5 +6,5 @@ export function useUser() {
const [root] = useMatches();
invariant(root);
- return (root.data as RootLoaderData).user;
+ return (root.data as RootLoaderData | undefined)?.user;
}
diff --git a/app/root.tsx b/app/root.tsx
index 65c3d4883..1cc4d03cb 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -18,6 +18,7 @@ import commonStyles from "~/styles/common.css";
import globalStyles from "~/styles/global.css";
import layoutStyles from "~/styles/layout.css";
import resetStyles from "~/styles/reset.css";
+import { Catcher } from "./components/Catcher";
import { Layout } from "./components/layout";
import type { UserWithPlusTier } from "./db/types";
import { getUser } from "./modules/auth";
@@ -61,7 +62,7 @@ export const loader: LoaderFunction = async ({ request }) => {
});
};
-export default function App() {
+function Document({ children }: { children: React.ReactNode }) {
return (
@@ -70,9 +71,7 @@ export default function App() {
-
-
-
+ {children}
@@ -81,3 +80,20 @@ export default function App() {
);
}
+
+export default function App() {
+ return (
+
+
+
+ );
+}
+
+// TODO: this shows user as logged out even if they are logged in - a bit awkward with 404's
+export function CatchBoundary() {
+ return (
+
+
+
+ );
+}