From d9ef69c0a0b652046c31a7c6b80eb0b230e02b47 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= <hi+github@ullrich.is>
Date: Wed, 25 Mar 2026 22:52:20 +0100
Subject: [PATCH] Fix i18n: init in entry.client.tsx before hydration
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

With custom entry.client.tsx, initI18n() in root.tsx runs too late —
the client hydrates before i18n is initialized, showing raw translation
keys. Move initI18n() to entry.client.tsx where it runs before
startTransition/hydrateRoot.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/journal/app/entry.client.tsx | 3 +++
 apps/journal/app/root.tsx         | 3 ---
 apps/planner/app/entry.client.tsx | 3 +++
 apps/planner/app/root.tsx         | 3 ---
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/journal/app/entry.client.tsx b/apps/journal/app/entry.client.tsx
index 1efd2c4..2e74a89 100644
--- a/apps/journal/app/entry.client.tsx
+++ b/apps/journal/app/entry.client.tsx
@@ -1,3 +1,4 @@
+import { initI18n } from "@trails-cool/i18n";
 import * as Sentry from "@sentry/react";
 import { useEffect } from "react";
 import { startTransition, StrictMode } from "react";
@@ -27,6 +28,8 @@ Sentry.init({
   enabled: import.meta.env.PROD && sentryEnvironment !== "ci",
 });
 
+initI18n();
+
 startTransition(() => {
   hydrateRoot(
     document,
diff --git a/apps/journal/app/root.tsx b/apps/journal/app/root.tsx
index cdd85c1..7a83bf4 100644
--- a/apps/journal/app/root.tsx
+++ b/apps/journal/app/root.tsx
@@ -4,12 +4,9 @@ import type { LinksFunction } from "react-router";
 import type { Route } from "./+types/root";
 import * as Sentry from "@sentry/react";
 import { useTranslation } from "react-i18next";
-import { initI18n } from "@trails-cool/i18n";
 import { getSessionUser } from "~/lib/auth.server";
 import stylesheet from "@trails-cool/ui/styles.css?url";
 
-initI18n();
-
 export const links: LinksFunction = () => [{ rel: "stylesheet", href: stylesheet }];
 
 export function Layout({ children }: { children: React.ReactNode }) {
diff --git a/apps/planner/app/entry.client.tsx b/apps/planner/app/entry.client.tsx
index b425aa0..1e7b804 100644
--- a/apps/planner/app/entry.client.tsx
+++ b/apps/planner/app/entry.client.tsx
@@ -1,3 +1,4 @@
+import { initI18n } from "@trails-cool/i18n";
 import * as Sentry from "@sentry/react";
 import { useEffect } from "react";
 import { startTransition, StrictMode } from "react";
@@ -27,6 +28,8 @@ Sentry.init({
   enabled: import.meta.env.PROD && sentryEnvironment !== "ci",
 });
 
+initI18n();
+
 startTransition(() => {
   hydrateRoot(
     document,
diff --git a/apps/planner/app/root.tsx b/apps/planner/app/root.tsx
index ec78097..b0e6aa1 100644
--- a/apps/planner/app/root.tsx
+++ b/apps/planner/app/root.tsx
@@ -3,11 +3,8 @@ import type { LinksFunction } from "react-router";
 import type { Route } from "./+types/root";
 import * as Sentry from "@sentry/react";
 import { useTranslation } from "react-i18next";
-import { initI18n } from "@trails-cool/i18n";
 import stylesheet from "@trails-cool/ui/styles.css?url";
 
-initI18n();
-
 export const links: LinksFunction = () => [{ rel: "stylesheet", href: stylesheet }];
 
 export function Layout({ children }: { children: React.ReactNode }) {