fix(emotion): update example to use remix v2

Author: sandy-garrido

emotion/app/root.tsx

@@ -1,5 +1,4 @@
 import { withEmotionCache } from "@emotion/react";
-import styled from "@emotion/styled";
 import type { MetaFunction } from "@remix-run/node";
 import {
   Links,
@@ -8,23 +7,22 @@ import {
   Outlet,
   Scripts,
   ScrollRestoration,
-  useCatch,
+  isRouteErrorResponse,
+  useRouteError,
 } from "@remix-run/react";
 import { useContext, useEffect, useRef } from "react";
 
 import ClientStyleContext from "~/styles/client.context";
 import ServerStyleContext from "~/styles/server.context";
 
-const Container = styled("div")`
-  background-color: #ff0000;
-  padding: 1em;
-`;
 
-export const meta: MetaFunction = () => ({
-  charset: "utf-8",
-  title: "Remix with Emotion",
-  viewport: "width=device-width,initial-scale=1",
-});
+export const meta: MetaFunction = () => {
+  return [
+    { name: "title", content: "Remix with Emotion" },
+    { name: "viewport", content: "width=device-width,initial-scale=1" },
+    { name: "charset", content: "utf-8" },
+  ]
+}
 
 interface DocumentProps {
   children: React.ReactNode;
@@ -94,26 +92,31 @@ export default function App() {
   );
 }
 
-export function CatchBoundary() {
-  const caught = useCatch();
+export function ErrorBoundary() {
+  const error = useRouteError();
 
-  return (
-    <Document title={`${caught.status} ${caught.statusText}`}>
-      <Container>
-        <p>
-          [CatchBoundary]: {caught.status} {caught.statusText}
-        </p>
-      </Container>
-    </Document>
-  );
-}
+  if (isRouteErrorResponse(error)) {
+    return (
+      <div>
+        <h1>Oops</h1>
+        <p>Status: {error.status}</p>
+        <p>{error.data.message}</p>
+      </div>
+    );
+  }
+
+  // Don't forget to typecheck with your own logic.
+  // Any value can be thrown, not just errors!
+  let errorMessage = "Unknown error";
+  if (error instanceof Error) {
+    errorMessage = error.message;
+  }
 
-export function ErrorBoundary({ error }: { error: Error }) {
   return (
-    <Document title="Error!">
-      <Container>
-        <p>[ErrorBoundary]: There was an error: {error.message}</p>
-      </Container>
-    </Document>
+    <div>
+      <h1>Uh oh ...</h1>
+      <p>Something went wrong.</p>
+      <pre>{errorMessage}</pre>
+    </div>
   );
-}
+}

emotion/package.json

@@ -8,25 +8,25 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@emotion/cache": "^11.7.1",
-    "@emotion/react": "^11.8.1",
-    "@emotion/server": "^11.4.0",
-    "@emotion/styled": "^11.8.1",
-    "@remix-run/node": "^1.19.3",
-    "@remix-run/react": "^1.19.3",
-    "@remix-run/serve": "^1.19.3",
+    "@emotion/cache": "^11.11.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/server": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@remix-run/node": "^2.0.0",
+    "@remix-run/react": "^2.0.0",
+    "@remix-run/serve": "^2.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@remix-run/dev": "^1.19.3",
-    "@remix-run/eslint-config": "^1.19.3",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
-    "eslint": "^8.27.0",
-    "typescript": "^4.8.4"
+    "@remix-run/dev": "^2.0.0",
+    "@remix-run/eslint-config": "^2.0.0",
+    "@types/react": "^18.2.22",
+    "@types/react-dom": "^18.2.7",
+    "eslint": "^8.49.0",
+    "typescript": "^5.2.2"
   },
   "engines": {
-    "node": ">=14.0.0"
+    "node": ">=18.0.0"
   }
 }

emotion/remix.config.js

@@ -1,11 +1,9 @@
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
-  future: {
-    v2_routeConvention: true,
-  },
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
   // publicPath: "/build/",
   // serverBuildPath: "build/index.js",
+  serverModuleFormat: "cjs",
 };

emotion/tsconfig.json

@@ -1,13 +1,13 @@
 {
   "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
   "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2019"],
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
     "moduleResolution": "node",
     "resolveJsonModule": true,
-    "target": "ES2019",
+    "target": "ES2022",
     "strict": true,
     "allowJs": true,
     "forceConsistentCasingInFileNames": true,