Client side code not working after adding the entry.server.tsx #236

villagra · 2025-01-25T13:31:40Z

villagra
Jan 25, 2025

Hi everybody,
I'm following the steps to setup localization into a brand new project with react-router v7 and I'm facing a weird issue I can't find solution for.

After adding the entry.cient.tx

import { HydratedRouter } from "react-router/dom";
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
import i18n from "./i18n";
import i18next from "i18next";
import { I18nextProvider, initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import Backend from "i18next-http-backend";
import { getInitialNamespaces } from "remix-i18next/client";

async function hydrate() {
 await i18next
   .use(initReactI18next) // Tell i18next to use the react-i18next plugin
   .use(LanguageDetector) // Setup a client-side language detector
   .use(Backend) // Setup your backend
   .init({
     ...i18n, // spread the configuration
     // This function detects the namespaces your routes rendered while SSR use
     ns: getInitialNamespaces(),
     backend: { loadPath: "/locales/{{lng}}/{{ns}}.json" },
     detection: {
       // Here only enable htmlTag detection, we'll detect the language only
       // server-side with remix-i18next, by using the `<html lang>` attribute
       // we can communicate to the client the language detected server-side
       order: ["htmlTag"],
       // Because we only use htmlTag, there's no reason to cache the language
       // on the browser, so we disable it
       caches: [],
     },
   });

 startTransition(() => {
   hydrateRoot(
     document,
     <I18nextProvider i18n={i18next}>
       <StrictMode>
         <HydratedRouter />
       </StrictMode>
     </I18nextProvider>
   );
 });
}

if (window.requestIdleCallback) {
 window.requestIdleCallback(hydrate);
} else {
 // Safari doesn't support requestIdleCallback
 // https://caniuse.com/requestidlecallback
 window.setTimeout(hydrate, 1);
}

and the entry.server.tsx

import { PassThrough } from "stream";
import { ServerRouter } from "react-router";
import type { AppLoadContext, EntryContext } from "react-router"
// @ts-ignore
import { renderToReadableStream } from "react-dom/server.browser"
import { isbot } from "isbot";
import { renderToPipeableStream } from "react-dom/server";
import { createInstance } from "i18next";
import i18next from "./i18next.server";
import { I18nextProvider, initReactI18next } from "react-i18next";
import Backend from "i18next-fs-backend";
import i18n from "./i18n"; // your i18n configuration file
import { resolve } from "node:path";
import { createReadableStreamFromReadable } from '@react-router/node';

const ABORT_DELAY = 5000;

export default async function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  let callbackName = isbot(request.headers.get("user-agent"))
    ? "onAllReady"
    : "onShellReady";

  let instance = createInstance();
  let lng = await i18next.getLocale(request);
  let ns = i18next.getRouteNamespaces(remixContext);

  await instance
    .use(initReactI18next) // Tell our instance to use react-i18next
    .use(Backend) // Setup our backend
    .init({
      ...i18n, // spread the configuration
      lng, // The locale we detected above
      ns, // The namespaces the routes about to render wants to use
      backend: { loadPath: resolve("./public/locales/{{lng}}/{{ns}}.json") },
    });

  return new Promise((resolve, reject) => {
    let didError = false;

    let { pipe, abort } = renderToPipeableStream(
      <I18nextProvider i18n={instance}>
        <ServerRouter  context={remixContext} url={request.url} />
      </I18nextProvider>,
      {
        [callbackName]: () => {
          let body = new PassThrough();
          const stream = createReadableStreamFromReadable(body);
          responseHeaders.set("Content-Type", "text/html");

          resolve(
            new Response(stream, {
              headers: responseHeaders,
              status: didError ? 500 : responseStatusCode,
            })
          );

          console.log(body)

          pipe(body);
        },
        onShellError(error: unknown) {
          reject(error);
        },
        onError(error: unknown) {
          didError = true;

          console.error(error);
        },
      }
    );

    setTimeout(abort, ABORT_DELAY);
  });
}

All client login code (like buttons's handlers) stop working.

I've prepared an example here:
https://github.com/villagra/reactrouteri18n

The "book now" should display an alert after clicking on it. It works fine after disable the entry.server.tsx

Any idea?
Thanks a lot in advance for your help! 🙇

villagra · 2025-01-26T09:50:16Z

villagra
Jan 26, 2025
Author

I've been digging a little bit more and the issue comes from loading either:

let { i18n } = useTranslation();

or

useChangeLanguage(locale);

in the function export function Layout({ children }: { children: React.ReactNode }) { from the app/root.tsx

That part will need to be moved to the default function instead of the Layout.

export function Layout({ children }: { children: React.ReactNode }) {

  //let { i18n } = useTranslation();
  let locale = useLoaderData<typeof loader>();
  //useChangeLanguage(locale);

  return (
    <html lang={locale} {...mantineHtmlProps}>
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <ColorSchemeScript />
        <Meta />
        <Links />
      </head>
      <body>
        <MantineProvider theme={theme}>{children}</MantineProvider>
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

export default function App() {
  let { i18n } = useTranslation();
  let locale = useLoaderData<typeof loader>();
  useChangeLanguage(locale);

  return <Outlet />;
}

I need still understand how this layouts work in here... pretty new to this whole thing.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Client side code not working after adding the entry.server.tsx #236

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

Select a reply

Client side code not working after adding the entry.server.tsx #236

villagra Jan 25, 2025

Replies: 1 comment

villagra Jan 26, 2025 Author

villagra
Jan 25, 2025

villagra
Jan 26, 2025
Author