createReadableStreamFromReadable on Cloudflare pages?

[vinaymhetre]

I am trying to implement as per instruction but createReadableStreamFromReadable is not available on @remix-run/cloudflare. Is there a workaround?

[sergiodxa]

Use renderToReadableStream as it comes by default in your entry.server.

[vinaymhetre]

I am getting

Could not resolve "fs"

    node_modules/i18next-fs-backend/esm/fs.cjs:2:18:
      2 │   var f = require('fs')
        │                   ~~~~
        ╵                   "./fs"

Here my entry.server.tsx

export default async function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext,
  // This is ignored so we can keep it in the template for visibility.  Feel
  // free to delete this parameter in your app if you're not using it!
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  loadContext: AppLoadContext
) {
  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(I18NexFsBackend) // 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') },
    });

  const body = await renderToReadableStream(
    <I18nextProvider i18n={instance}>
      <RemixServer context={remixContext} url={request.url} />
    </I18nextProvider>,
    {
      signal: request.signal,
      onError(error: unknown) {
        // Log streaming rendering errors from inside the shell
        console.error(error);
        responseStatusCode = 500;
      },
    }
  );

  if (isbot(request.headers.get('user-agent') || '')) {
    await body.allReady;
  }

  responseHeaders.set('Content-Type', 'text/html');
  return new Response(body, {
    headers: responseHeaders,
    status: responseStatusCode,
  });
}

[sergiodxa]

You can't use i18next-fs-backend in CF because CF has no file system. When deploying to CF many things may not work if they depend on Node-only features and you will have to be aware of that.

[vinaymhetre]

Understood! Moving to node based server.

[gregory]

Any idea why we couldn't load the i18n files from ASSET on Cloudflare Pages?

[sergiodxa]

@gregory you will need a custom i18next backend that supports reading from that place