From 5199c1434f29513e864bb558bcec3a8ca4a286f2 Mon Sep 17 00:00:00 2001
From: Jeremy Asuncion <jeremyasuncion808@gmail.com>
Date: Fri, 1 Dec 2023 11:40:28 -0800
Subject: [PATCH] fix i18n (#196)

Fixes SSR for i18n. Looks like we were passing the wrong path for the
locales dir and also not exporting an `handle` from `root.tsx`
---
 frontend/packages/data-portal/app/entry.server.tsx  |  5 ++---
 frontend/packages/data-portal/app/i18next.server.ts | 12 ++++++++++--
 frontend/packages/data-portal/app/root.tsx          |  4 ++++
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/frontend/packages/data-portal/app/entry.server.tsx b/frontend/packages/data-portal/app/entry.server.tsx
index 75e60127a..afb0f7669 100644
--- a/frontend/packages/data-portal/app/entry.server.tsx
+++ b/frontend/packages/data-portal/app/entry.server.tsx
@@ -9,14 +9,13 @@ import type { EntryContext } from '@remix-run/node'
 import { RemixServer } from '@remix-run/react'
 import { createInstance } from 'i18next'
 import Backend from 'i18next-fs-backend'
-import { resolve } from 'path'
 import { renderToString } from 'react-dom/server'
 import { I18nextProvider, initReactI18next } from 'react-i18next'
 
 import { createEmotionCache } from 'app/utils/createEmotionCache'
 
 import { i18n } from './i18next'
-import { i18next } from './i18next.server'
+import { i18next, LOCALES_PATH } from './i18next.server'
 import { theme } from './theme'
 
 export default async function handleRequest(
@@ -39,7 +38,7 @@ export default async function handleRequest(
       ...i18n,
       lng,
       ns,
-      backend: { loadPath: resolve('./public/locales/{{lng}}/{{ns}}.json') },
+      backend: { loadPath: LOCALES_PATH },
     })
 
   function MuiRemixServer() {
diff --git a/frontend/packages/data-portal/app/i18next.server.ts b/frontend/packages/data-portal/app/i18next.server.ts
index c5d0a0d68..6806f9d35 100644
--- a/frontend/packages/data-portal/app/i18next.server.ts
+++ b/frontend/packages/data-portal/app/i18next.server.ts
@@ -1,10 +1,18 @@
-import { resolve } from 'node:path'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
 
 import Backend from 'i18next-fs-backend'
 import { RemixI18Next } from 'remix-i18next'
 
 import { i18n } from './i18next'
 
+const DIRNAME = dirname(fileURLToPath(import.meta.url))
+
+export const LOCALES_PATH = resolve(
+  DIRNAME,
+  '../public/locales/{{lng}}/{{ns}}.json',
+)
+
 export const i18next = new RemixI18Next({
   detection: {
     supportedLanguages: i18n.supportedLngs,
@@ -16,7 +24,7 @@ export const i18next = new RemixI18Next({
   i18next: {
     ...i18n,
     backend: {
-      loadPath: resolve('./public/locales/{{lng}}/{{ns}}.json'),
+      loadPath: LOCALES_PATH,
     },
   },
 
diff --git a/frontend/packages/data-portal/app/root.tsx b/frontend/packages/data-portal/app/root.tsx
index a4dc1c53d..d5eae41e9 100644
--- a/frontend/packages/data-portal/app/root.tsx
+++ b/frontend/packages/data-portal/app/root.tsx
@@ -127,6 +127,10 @@ export const links: LinksFunction = () => [
   ...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : []),
 ]
 
+export const handle = {
+  i18n: 'translation',
+}
+
 // https://remix.run/api/conventions#default-export
 // https://remix.run/api/conventions#route-filenames
 export default function App() {