I know it's been a little while, but when I try to attempt this after upgrading to Remix 2.15.0 and trying to adopt the v3_singleFetch future flag, I'm getting this error:

TypeError [ERR_INVALID_STATE]: Invalid state: ReadableStream is locked

Maybe something to do with using renderToString and then renderToPipeableStream? It's a little confusing to me right now. When I remove the steps around rendering to string -> extracting critical chunks and just start with the render to pipeable stream the error seems to go away. 🤔

EDIT: whoops, must have missed this in the docs

@ITSjwags have you been able to solve it? I'm also stuck on how to convert this part:

  const html = renderToString(
    <ServerStyleContext.Provider value={null}>
      <CacheProvider value={cache}>
        <RemixServer context={remixContext} url={request.url} />
      </CacheProvider>
    </ServerStyleContext.Provider>,
  )

  const chunks = extractCriticalToChunks(html)

@ITSjwags have you been able to solve it? I'm also stuck on how to convert this part:

  const html = renderToString(
    <ServerStyleContext.Provider value={null}>
      <CacheProvider value={cache}>
        <RemixServer context={remixContext} url={request.url} />
      </CacheProvider>
    </ServerStyleContext.Provider>,
  )

  const chunks = extractCriticalToChunks(html)

@mariojsnunes I haven't been able to solve it yet, other than removing that step. Which doesn't seem like the best approach.