entry.server.tsx code may need updating to work with React 18

[wildcat63]

Describe the bug

Just started a new Grunge stack, and it's based on React 18 now. First order of business was to add in i18 support, and as I was following the instructions, I realized that the entry.server.ts file has changed rather materially to now use renderToPipeableStream. The code provided contains the following:

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

    const { pipe, abort } = renderToPipeableStream(
        <RemixServer context={remixContext} url={request.url} />
      {
        [callbackName]() {
          let body = new PassThrough();
   ...

which makes it harder to insert "" since instance in the instructions uses async/await. I tried to guess what might work, but I got a React error about cannot read property useMemo of null, so I'm sure I guessed wrong.

Any ideas on what the new code will need to look like?

Btw, thanks very much for the package and all of the effort!

Your Example Website or App

https://github.com/remix-run/grunge-stack

Steps to Reproduce the Bug or Issue

1. Create new grunge app
2. Make the changes as suggested in README
3. Struggle when you get to entry.server.ts

Expected behavior

I actually didn't expect it to work with the new language.

Screenshots or Videos

No response

Platform

MacOs 12.4, M1

Additional context

No response

[sergiodxa]

You can put your async code before the return new Promise line, you could also make the callback you pass to Promise (where you received resolve and reject) an async function, then wrap RemixServer in <I18nextProvider i18n={instance}> as in the docs.

[wildcat63]

Thanks. First option was what I tried yesterday, so I tried the second suggestion:

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

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

    // Then we could detect locale from the request
    let lng = await i18next.getLocale(request);

    // And here we detect what namespaces the routes about to render want to use
    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: resolvePath("_static/locales/{{lng}}/{{ns}}.json"),
        },
      });

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

          resolve(
            new Response(body, {
              status: didError ? 500 : responseStatusCode,
              headers: responseHeaders,
            })
          );
          pipe(body);
        },
        onShellError(err: unknown) {
          reject(err);
        },
        onError(error: unknown) {
          didError = true;
          console.error(error);
        },
      }
    );
    setTimeout(abort, ABORT_DELAY);
  });
}

Unfortunately, I still get the same error, and it arises due to the line . I've checked that the "instance" is set and seems reasonable.

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
   TypeError: Cannot read property 'useMemo' of null
   at useMemo (xxx/apps/adminapp/node_modules/react/cjs/react.development.js:1650:21)
   at I18nextProvider (xxx/apps/adminapp/node_modules/react-i18next/dist/commonjs/I18nextProvider.js:16:34)
   at renderWithHooks (xxx/apps/adminapp/server/node_modules/react-dom/cjs/react-dom-server.node.development.js:5724:16)

Do let me know if you have any other suggestions. If not, I can create a clean grunge app and attempt to add the i18n stuff to this point and share that. (Note, btw, that the location of the static assets is different under arc than normal Remix apps, but this path works for serving the Remix logo, so I think it's right.)

[sergiodxa]

Oh if your error is on the React part then most likely it's an issue in react-i18next, remix-i18next only gives you a way to use i18next server-side inside your loader and actions functions, almost all of the React parts (e.g. useTranslate or I18nextProvider which is on your error message) are provided by react-i18next.

It's possible that react-i18next doesn't support React SSR Streaming

[brandonpittman]

This is working for me:

import type { EntryContext } from "@remix-run/node";
import { PassThrough } from "stream";
import { RemixServer } from "@remix-run/react";
import { renderToPipeableStream } from "react-dom/server";
import { preloadRouteAssets } from "remix-utils";

import { createInstance } from "i18next";
import Backend from "i18next-fs-backend";
import { resolve } from "node:path";
import { I18nextProvider, initReactI18next } from "react-i18next";
import i18next from "./i18next.server";
import i18n from "./i18n";

export default async function handleRequest(
  request: Request,
  statusCode: number,
  headers: Headers,
  context: EntryContext
) {
  // First, we create a new instance of i18next so every request will have a
  // completely unique instance and not share any state
  let instance = createInstance();

  // Then we could detect locale from the request
  let lng = await i18next.getLocale(request);
  // And here we detect what namespaces the routes about to render want to use
  let ns = i18next.getRouteNamespaces(context);

  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"),
      },
    });

  preloadRouteAssets(context, headers);

  headers.set("Content-Type", "text/html");

  return new Promise((resolve) => {
    const { pipe } = renderToPipeableStream(
      <I18nextProvider i18n={instance}>
        <RemixServer context={context} url={request.url} />
      </I18nextProvider>,
      {
        onShellReady() {
          const body = new PassThrough();

          headers.set("Content-Type", "text/html");

          resolve(
            new Response(body, {
              statusCode,
              headers,
            })
          );
          pipe(body);
        },
      }
    );
  });
}

[Mihai-github]

Hey, for me still does not work the code above ... the body still complains ... also can someone explain to me why we need the code in both entry.client.tsx and entry.server.tsx

[sergiodxa]

One is for server side rendering and the other is for client side rendering.