feat(website): handle styles not appearing in root component

This workaround for this bug remix-run/remix#1136.
IgnisDa · Dec 26, 2022 · 022610e · 022610e
1 parent b07c504
commit 022610e
Show file tree

Hide file tree

Showing 15 changed files with 71 additions and 93 deletions.
diff --git a/apps/website/app/lib/routes.d.ts b/apps/website/app/lib/routes.d.ts
@@ -1,28 +1,28 @@
 declare module "routes-gen" {
   export type RouteParams = {
+    "/": Record<string, never>;
     "/questions/create-or-update": Record<string, never>;
     "/information/toolchain": Record<string, never>;
     "/questions/solve/:slug": { "slug": string };
     "/playground": Record<string, never>;
     "/classes/create": Record<string, never>;
     "/questions/list": Record<string, never>;
+    "/auth/logout": Record<string, never>;
     "/classes/:id": { "id": string };
-    "/": Record<string, never>;
     "/auth": Record<string, never>;
-    "/auth/logout": Record<string, never>;
   };
 
   export function route<
     T extends
+      | ["/"]
       | ["/questions/create-or-update"]
       | ["/information/toolchain"]
       | ["/questions/solve/:slug", RouteParams["/questions/solve/:slug"]]
       | ["/playground"]
       | ["/classes/create"]
       | ["/questions/list"]
+      | ["/auth/logout"]
       | ["/classes/:id", RouteParams["/classes/:id"]]
-      | ["/"]
       | ["/auth"]
-      | ["/auth/logout"]
   >(...args: T): typeof args[0];
 }
diff --git a/apps/website/app/root.tsx b/apps/website/app/root.tsx
@@ -1,7 +1,6 @@
 import {
   AppShell,
   Box,
-  Center,
   createEmotionCache,
   MantineProvider,
 } from '@mantine/core';
@@ -15,20 +14,13 @@ import {
   Outlet,
   Scripts,
   ScrollRestoration,
-  useCatch,
   useLoaderData,
 } from '@remix-run/react';
 import { AppNavbar } from './lib/components/AppShell';
-import { ErrorPage } from './lib/components/ErrorPage';
 import { ApplicationConfig } from './lib/config.server';
 import type { ShouldReloadFunction } from '@remix-run/react';
-import type {
-  LinksFunction,
-  MetaFunction,
-  ErrorBoundaryComponent,
-} from '@remix-run/node';
+import type { LinksFunction, MetaFunction } from '@remix-run/node';
 import type { FC, ReactNode } from 'react';
-import type { CatchBoundaryComponent } from '@remix-run/server-runtime/dist/routeModules';
 
 createEmotionCache({ key: 'mantine' });
 
@@ -106,72 +98,6 @@ export default function App() {
   );
 }
 
-export const ErrorBoundary: ErrorBoundaryComponent = ({ error }) => {
-  return (
-    <MantineProvider
-      withGlobalStyles
-      withNormalizeCSS
-      theme={{ colorScheme: 'dark' }}
-    >
-      <html lang="en">
-        <head>
-          <title>Internal Server Error</title>
-          <StylesPlaceholder />
-          <Meta />
-          <Links />
-        </head>
-        <body>
-          <Center h={'100vh'}>
-            <ErrorPage
-              statusCode={500}
-              message={'Internal Server Error'}
-              description={
-                "Our servers could not handle your request. Don't worry, our development team was already notified."
-              }
-              stack={error.stack}
-            />
-          </Center>
-          <Scripts />
-        </body>
-      </html>
-    </MantineProvider>
-  );
-};
-
-export const CatchBoundary: CatchBoundaryComponent = () => {
-  const caught = useCatch();
-
-  return (
-    <MantineProvider
-      withGlobalStyles
-      withNormalizeCSS
-      theme={{ colorScheme: 'dark' }}
-    >
-      <html lang="en">
-        <head>
-          <title>User Error</title>
-          <StylesPlaceholder />
-          <Meta />
-          <Links />
-        </head>
-        <body>
-          <Center h={'100vh'}>
-            <ErrorPage
-              statusCode={caught?.status}
-              message={caught?.data?.message || 'Not Found'}
-              description={
-                caught?.data?.description ||
-                'We could not find what you were looking for. If you think it should be here, please contact us.'
-              }
-            />
-          </Center>
-          <Scripts />
-        </body>
-      </html>
-    </MantineProvider>
-  );
-};
-
 declare global {
   interface Window {
     ENV: {

diff --git a/apps/website/app/routes/__boundary.tsx b/apps/website/app/routes/__boundary.tsx
@@ -0,0 +1,40 @@
+import { Outlet, useCatch } from '@remix-run/react';
+import { ErrorPage } from '~/lib/components/ErrorPage';
+import type { CatchBoundaryComponent } from '@remix-run/react/dist/routeModules';
+import type { ErrorBoundaryComponent } from '@remix-run/server-runtime';
+
+// We have to use this workaround because of a bug in Remix
+// https://github.com/remix-run/remix/issues/1136. Solution taken from
+// https://github.com/remix-run/remix/issues/1136#issuecomment-1314519567
+
+export default () => {
+  return <Outlet />;
+};
+
+export const ErrorBoundary: ErrorBoundaryComponent = ({ error }) => {
+  return (
+    <ErrorPage
+      statusCode={500}
+      message={'Internal Server Error'}
+      description={
+        "Our servers could not handle your request. Don't worry, our development team was already notified."
+      }
+      stack={error.stack}
+    />
+  );
+};
+
+export const CatchBoundary: CatchBoundaryComponent = () => {
+  const caught = useCatch();
+
+  return (
+    <ErrorPage
+      statusCode={caught?.status}
+      message={caught?.data?.message || 'Not Found'}
+      description={
+        caught?.data?.description ||
+        'We could not find what you were looking for. If you think it should be here, please contact us.'
+      }
+    />
+  );
+};
diff --git a/apps/website/app/routes/__boundary/$.tsx b/apps/website/app/routes/__boundary/$.tsx
@@ -0,0 +1,18 @@
+import { useCatch } from '@remix-run/react';
+import { ErrorPage } from '~/lib/components/ErrorPage';
+
+// needed to tell remix that this isn't a resource route
+export default function CatchAllPage() {
+  const caught = useCatch();
+
+  return (
+    <ErrorPage
+      statusCode={caught?.status || 404}
+      message={caught?.data?.message || 'Not Found'}
+      description={
+        caught?.data?.description ||
+        'We could not find what you were looking for. If you think it should be here, please contact us.'
+      }
+    />
+  );
+}
diff --git a/apps/website/app/routes/auth/index.tsx → ...site/app/routes/__boundary/auth/index.tsx b/apps/website/app/routes/auth/index.tsx → ...site/app/routes/__boundary/auth/index.tsx
@@ -25,7 +25,7 @@ import { z } from 'zod';
 import { zx } from 'zodix';
 import { SUCCESSFUL_REDIRECT_PATH } from '~/lib/constants';
 import { gqlClient } from '~/lib/services/graphql.server';
-import authStyles from '../../styles/auth/index.css';
+import authStyles from '../../../styles/auth/index.css';
 import type { ActionArgs, LinksFunction } from '@remix-run/node';
 
 export const links: LinksFunction = () => {

diff --git a/apps/website/app/routes/auth/logout.tsx → ...ite/app/routes/__boundary/auth/logout.tsx b/apps/website/app/routes/auth/logout.tsx → ...ite/app/routes/__boundary/auth/logout.tsx
@@ -1,8 +1,8 @@
-import { FAILURE_REDIRECT_PATH } from '~/lib/constants';
 import { redirect } from '@remix-run/node';
-import type { DataFunctionArgs } from '@remix-run/node';
 import { serialize } from 'cookie';
 import { ApplicationConfig } from '~/lib/config.server';
+import { FAILURE_REDIRECT_PATH } from '~/lib/constants';
+import type { DataFunctionArgs } from '@remix-run/node';
 
 export const loader = async (_args: DataFunctionArgs) => {
   const hankoCookie = serialize('hanko', '', {

diff --git a/apps/website/app/routes/classes/$id.tsx → ...ite/app/routes/__boundary/classes/$id.tsx b/apps/website/app/routes/classes/$id.tsx → ...ite/app/routes/__boundary/classes/$id.tsx
diff --git a/apps/website/app/routes/classes/create.tsx → .../app/routes/__boundary/classes/create.tsx b/apps/website/app/routes/classes/create.tsx → .../app/routes/__boundary/classes/create.tsx
@@ -1,17 +1,17 @@
+import { AccountType } from ':generated/graphql/orchestrator/generated/graphql';
+import { CREATE_CLASS } from ':generated/graphql/orchestrator/mutations';
+import { Button, Container, Paper, TextInput, Title } from '@mantine/core';
 import { json, redirect } from '@remix-run/node';
 import { Form } from '@remix-run/react';
 import { badRequest } from 'remix-utils';
 import { route } from 'routes-gen';
 import { z } from 'zod';
 import { zx } from 'zodix';
-import type { ActionArgs, LoaderArgs } from '@remix-run/node';
-import { AccountType } from ':generated/graphql/orchestrator/generated/graphql';
+import { requireValidJwt } from '~/lib/services/auth.server';
 import { authenticatedRequest, gqlClient } from '~/lib/services/graphql.server';
-import { CREATE_CLASS } from ':generated/graphql/orchestrator/mutations';
 import { getUserDetails } from '~/lib/services/user.server';
-import { Button, Container, Paper, TextInput, Title } from '@mantine/core';
-import { requireValidJwt } from '~/lib/services/auth.server';
 import { forbiddenError } from '~/lib/utils';
+import type { ActionArgs, LoaderArgs } from '@remix-run/node';
 
 export const loader = async ({ request }: LoaderArgs) => {
   await requireValidJwt(request);

diff --git a/apps/website/app/routes/index.tsx → apps/website/app/routes/__boundary/index.tsx b/apps/website/app/routes/index.tsx → apps/website/app/routes/__boundary/index.tsx
@@ -2,7 +2,6 @@ import { json } from '@remix-run/node';
 import { Link, useLoaderData } from '@remix-run/react';
 import { route } from 'routes-gen';
 import { requireValidJwt } from '~/lib/services/auth.server';
-
 import type { LoaderArgs } from '@remix-run/node';
 
 export const loader = async ({ request }: LoaderArgs) => {

diff --git a/...site/app/routes/information/toolchain.tsx → ...utes/__boundary/information/toolchain.tsx b/...site/app/routes/information/toolchain.tsx → ...utes/__boundary/information/toolchain.tsx
diff --git a/apps/website/app/routes/playground/index.tsx → ...pp/routes/__boundary/playground/index.tsx b/apps/website/app/routes/playground/index.tsx → ...pp/routes/__boundary/playground/index.tsx
diff --git a/...app/routes/questions/create-or-update.tsx → ...__boundary/questions/create-or-update.tsx b/...app/routes/questions/create-or-update.tsx → ...__boundary/questions/create-or-update.tsx
diff --git a/apps/website/app/routes/questions/list.tsx → .../app/routes/__boundary/questions/list.tsx b/apps/website/app/routes/questions/list.tsx → .../app/routes/__boundary/questions/list.tsx
diff --git a/...site/app/routes/questions/solve/$slug.tsx → ...utes/__boundary/questions/solve/$slug.tsx b/...site/app/routes/questions/solve/$slug.tsx → ...utes/__boundary/questions/solve/$slug.tsx
diff --git a/apps/website/app/routes/auth.tsx b/apps/website/app/routes/auth.tsx