Translations are loading asynchronously after the first request #149

jansedlon · 2023-09-14T11:13:33Z

jansedlon
Sep 14, 2023

Hi @sergiodxa 👋 I'm quite desperate. I have been trying to make remix-i18next work for many many hours but still no luck. Everything works on first request, but then, when i move between pages, it looks like that translations are loading asynchronously and I have no idea why. It bothers me because if I want to set default values to my forms, it's set as the translation key rather than the translation itself.

I have tries many different approaches. I tried switching to { useSuspense: true }, tinkering with the config, etc.. but nothing helps. I use latest versions of all packages.

link to video

The code is...
entry.server.tsx

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

  const t = 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") },
    });
  instance.hasLoadedNamespace("task-form");

  z.setErrorMap(makeZodI18nMap({ t, ns: ["zod", "custom-zod"] }));

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

    // NOTE: This timing will only include things that are rendered in the shell
    // and will not include suspended components and deferred loaders
    const timings = makeTimings("render", "renderToPipeableStream");

    const { pipe, abort } = renderToPipeableStream(
      <NonceProvider value={nonce}>
        <I18nextProvider i18n={instance}>
          <RemixServer context={remixContext} url={request.url} />
        </I18nextProvider>
      </NonceProvider>,
      {
        [callbackName]: () => {
          const body = new PassThrough();
          responseHeaders.set("Content-Type", "text/html");
          responseHeaders.set("Server-Timing", timings.toString());
          resolve(
            new Response(body, {
              headers: responseHeaders,
              status: didError ? 500 : responseStatusCode,
            }),
          );
          pipe(body);
        },
        onShellError: (err: unknown) => {
          reject(err);
        },
        onError: (error: unknown) => {
          didError = true;

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

    setTimeout(abort, ABORT_DELAY);
  });

entry.client.tsx

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: ["cookie", "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>
          <RemixBrowser />
        </StrictMode>
      </I18nextProvider>,
    );
  });
}

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

root.tsx

export async function loader({ request }: DataFunctionArgs) {
  const timings = makeTimings("rootLoader");
  const userId = await time(() => getUserId(request), {
    timings,
    type: "getUserId",
    desc: "getUserId in root",
  });
  const locale = await i18next.getLocale(request);

  return json(
    {
      user,
      ENV: getEnv(),
      locale,
      requestInfo: {
        origin: getDomainUrl(request),
        path: new URL(request.url).pathname,
        hints: getHints(request),
      },
      toast,
    },
    {
      headers: combineHeaders(
        { "Server-Timing": timings.toString() },
        {
          "Set-Cookie": `lng=${locale}; Path=/; HttpOnly; SameSite=Lax`,
        },
      ),
      status: globalError ? 302 : undefined,
    },
  );

function App() {
  const data = useLoaderData<typeof loader>();
  const nonce = useNonce();
  const { i18n } = useTranslation();

  useChangeLanguage(data.locale);

  return (
    <Document lang={data.locale} dir={i18n.dir()} env={data.ENV} nonce={nonce}>
      <div className="flex flex-1 flex-col">
        <Outlet />
      </div>
      <Toaster closeButton richColors />
      {data.toast ? <ShowToast toast={data.toast} /> : null}
    </Document>
  );
}

It also shows this error i18next::translator: key "scenario.scenes.inputsPlaceholders" for languages "en" won't get resolved as namespace "task-form" was not yet loaded This means something IS WRONG in your setup. You access the t function before i18next.init / i18next.loadNamespace / i18next.changeLanguage was done. Wait for the callback or Promise to resolve before accessing it!!!

jansedlon · 2023-09-14T11:16:09Z

jansedlon
Sep 14, 2023
Author

I tried to debug it as much as I could. Not sure if that helps, but I found out that entry.client.tsx gets called only for the first request. As far as I understand, the part of code in entry.client.tsx ns: getInitialNamespaces(), should be responsible for getting the corrent namespaces to load. But since the file runs only once, it fetches the namespaces only for the current route. When I go to a different loading, it's not called again and i18n fetches the translations asynchronously..

2 replies

jansedlon Sep 14, 2023
Author

{ useSuspense: true } is also not an option, because then i have wrap the children in root in Suspense and then if I have a route that's a dialog, loading that route causes the dialog to flash until it loads the translations

jansedlon Sep 14, 2023
Author

And it's easily reproducible codesandbox (in console it's saying the same thing about missing keys)

sergiodxa · 2023-09-14T17:01:20Z

sergiodxa
Sep 14, 2023
Maintainer

This is how i18next and react-i18next loads the translations, remix-i18next is not in charge of doing that.

The only way to load them synchronous is to use the resources option in the i18next configuration which will stop using the backend and instead use the previously defined ones.

You could also try to preload if you know what translations you will need, or use suspend to don't render the UI until it's loaded, I think if you don't render any Suspense boundary component and still use suspense it will just wait for the translations without rendering any fallback.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Translations are loading asynchronously after the first request #149

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 2 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Translations are loading asynchronously after the first request #149

jansedlon Sep 14, 2023

Replies: 2 comments · 2 replies

jansedlon Sep 14, 2023 Author

jansedlon Sep 14, 2023 Author

jansedlon Sep 14, 2023 Author

sergiodxa Sep 14, 2023 Maintainer

jansedlon
Sep 14, 2023

Replies: 2 comments 2 replies

jansedlon
Sep 14, 2023
Author

jansedlon Sep 14, 2023
Author

jansedlon Sep 14, 2023
Author

sergiodxa
Sep 14, 2023
Maintainer