Example with Remix + React18

[HuyAms]

Hi, could you add an example of how it works in React18?

Example of the new Remix entry.server.tsx can be found here: https://github.com/epicweb-dev/epic-stack/blob/main/app/entry.server.tsx

Here is what I've tried but it doesn't seem to work

function handleBrowserRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  return new Promise((resolve, reject) => {
    let shellRendered = false;
    const { pipe, abort } = renderToPipeableStream(
      <RemixServer
        context={remixContext}
        url={request.url}
        abortDelay={ABORT_DELAY}
      />,
      {
        onShellReady() {
          shellRendered = true;
          const body = new PassThrough();
          const stream = createReadableStreamFromReadable(body);

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

          const response =  new Response(stream, {
            headers: responseHeaders,
            status: responseStatusCode,
          })

          resolve(
           👉 etag({ request, response })
          );

          pipe(body);
        },
        onShellError(error: unknown) {
          ..
        },
        onError(error: unknown) {
        ...
        },
      }
    );

    setTimeout(abort, ABORT_DELAY);
  });
}

[gonstoll]

@HuyAms did you have any luck figuring this out? I'm stuck in the same place 😕

[gonstoll]

@HuyAms in case you didn't figure it out, here is the solution: https://github.com/remix-run/remix/discussions/9174