fix(frontend): make GolfPlayApp and GolfWatchApp client-only components to fix SSR errors

6 files changed, 86 insertions, 6 deletions

diff --git a/frontend/app/components/GolfPlayApp.tsx b/frontend/app/components/GolfPlayApp.client.tsx
index 3cb512a..3cb512a 100644
--- a/frontend/app/components/GolfPlayApp.tsx
+++ b/frontend/app/components/GolfPlayApp.client.tsx
diff --git a/frontend/app/components/GolfWatchApp.tsx b/frontend/app/components/GolfWatchApp.client.tsx
index 00ad005..00ad005 100644
--- a/frontend/app/components/GolfWatchApp.tsx
+++ b/frontend/app/components/GolfWatchApp.client.tsx
diff --git a/frontend/app/routes/golf.$gameId.play.tsx b/frontend/app/routes/golf.$gameId.play.tsx
index 5868640..3932b4b 100644
--- a/frontend/app/routes/golf.$gameId.play.tsx
+++ b/frontend/app/routes/golf.$gameId.play.tsx
@@ -1,8 +1,10 @@
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
+import { useLoaderData } from "@remix-run/react";
+import { ClientOnly } from "remix-utils/client-only";
 import { isAuthenticated } from "../.server/auth";
 import { apiClient } from "../.server/api/client";
-import { useLoaderData } from "@remix-run/react";
-import GolfPlayApp from "../components/GolfPlayApp";
+import GolfPlayApp from "../components/GolfPlayApp.client";
+import GolfPlayAppConnecting from "../components/GolfPlayApps/GolfPlayAppConnecting";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
   return [
@@ -60,5 +62,9 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
 export default function GolfPlay() {
   const { game, sockToken } = useLoaderData<typeof loader>();
 
-  return <GolfPlayApp game={game} sockToken={sockToken} />;
+  return (
+    <ClientOnly fallback={<GolfPlayAppConnecting />}>
+      {() => <GolfPlayApp game={game} sockToken={sockToken} />}
+    </ClientOnly>
+  );
 }
diff --git a/frontend/app/routes/golf.$gameId.watch.tsx b/frontend/app/routes/golf.$gameId.watch.tsx
index 4093295..eeb6fb9 100644
--- a/frontend/app/routes/golf.$gameId.watch.tsx
+++ b/frontend/app/routes/golf.$gameId.watch.tsx
@@ -1,8 +1,10 @@
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
+import { useLoaderData } from "@remix-run/react";
+import { ClientOnly } from "remix-utils/client-only";
 import { isAuthenticated } from "../.server/auth";
 import { apiClient } from "../.server/api/client";
-import { useLoaderData } from "@remix-run/react";
-import GolfWatchApp from "../components/GolfWatchApp";
+import GolfWatchApp from "../components/GolfWatchApp.client";
+import GolfWatchAppConnecting from "../components/GolfWatchApps/GolfWatchAppConnecting";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
   return [
@@ -60,5 +62,9 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
 export default function GolfWatch() {
   const { game, sockToken } = useLoaderData<typeof loader>();
 
-  return <GolfWatchApp game={game} sockToken={sockToken} />;
+  return (
+    <ClientOnly fallback={<GolfWatchAppConnecting />}>
+      {() => <GolfWatchApp game={game} sockToken={sockToken} />}
+    </ClientOnly>
+  );
 }
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index a5e2c28..c926e7d 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -17,6 +17,7 @@
         "react-use-websocket": "^4.8.1",
         "remix-auth": "^3.7.0",
         "remix-auth-form": "^1.5.0",
+        "remix-utils": "^7.6.0",
         "use-debounce": "^10.0.1"
       },
       "devDependencies": {
@@ -9197,6 +9198,72 @@
         "remix-auth": "^3.6.0"
       }
     },
+    "node_modules/remix-utils": {
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/remix-utils/-/remix-utils-7.6.0.tgz",
+      "integrity": "sha512-BPhCUEy+nwrhDDDg2v3+LFSszV6tluMbeSkbffj2o4tqZxt5Kn69Y9sNpGxYLAj8gjqeYDuxjv55of+gYnnykA==",
+      "dependencies": {
+        "type-fest": "^4.3.3"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@remix-run/cloudflare": "^2.0.0",
+        "@remix-run/deno": "^2.0.0",
+        "@remix-run/node": "^2.0.0",
+        "@remix-run/react": "^2.0.0",
+        "@remix-run/router": "^1.7.2",
+        "crypto-js": "^4.1.1",
+        "intl-parse-accept-language": "^1.0.0",
+        "is-ip": "^5.0.1",
+        "react": "^18.0.0",
+        "zod": "^3.22.4"
+      },
+      "peerDependenciesMeta": {
+        "@remix-run/cloudflare": {
+          "optional": true
+        },
+        "@remix-run/deno": {
+          "optional": true
+        },
+        "@remix-run/node": {
+          "optional": true
+        },
+        "@remix-run/react": {
+          "optional": true
+        },
+        "@remix-run/router": {
+          "optional": true
+        },
+        "crypto-js": {
+          "optional": true
+        },
+        "intl-parse-accept-language": {
+          "optional": true
+        },
+        "is-ip": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "zod": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/remix-utils/node_modules/type-fest": {
+      "version": "4.23.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.23.0.tgz",
+      "integrity": "sha512-ZiBujro2ohr5+Z/hZWHESLz3g08BBdrdLMieYFULJO+tWc437sn8kQsWLJoZErY8alNhxre9K4p3GURAG11n+w==",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index ae51afd..61def51 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,6 +22,7 @@
     "react-use-websocket": "^4.8.1",
     "remix-auth": "^3.7.0",
     "remix-auth-form": "^1.5.0",
+    "remix-utils": "^7.6.0",
     "use-debounce": "^10.0.1"
   },
   "devDependencies": {