trails-cool/trails
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix i18n: init in entry.client.tsx before hydration

Browse source 
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>
This commit is contained in:
Ullrich Schäfer 2026-03-25 22:52:20 +01:00
parent ebe4ccd838
commit d9ef69c0a0
No known key found for this signature in database
GPG key ID: A32FF691A0F752D9
4 changed files with 6 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

3
apps/journal/app/entry.client.tsx
View file

@ -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,

3
apps/journal/app/root.tsx
View file

@ -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 }) {

3
apps/planner/app/entry.client.tsx
View file

@ -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,

3
apps/planner/app/root.tsx
View file

@ -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 }) {