From 346670ca6cdd4ae7eb2d33b349453d6733f4001f Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Fri, 17 Dec 2021 13:27:53 +0100
Subject: [PATCH] Fix ReadableStream.pipeTo() being unimplemented in the web
 runtime (#32602)

Currently we are using a TransformStream to process the forwarded stream for the inlined data, but unfortunately the `pipeTo` method is not implemented in the web runtime. This PR changes it to a naive way of doing so.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`
---
 .../next-middleware-ssr-loader/render.ts      |  4 ++
 packages/next/server/render.tsx               | 39 +++++++++++--------
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/packages/next/build/webpack/loaders/next-middleware-ssr-loader/render.ts b/packages/next/build/webpack/loaders/next-middleware-ssr-loader/render.ts
index cf35f0439ca9d45..53b2a3e930c901b 100644
--- a/packages/next/build/webpack/loaders/next-middleware-ssr-loader/render.ts
+++ b/packages/next/build/webpack/loaders/next-middleware-ssr-loader/render.ts
@@ -101,6 +101,10 @@ export function getRender({
         renderOpts
       )
     } catch (err: any) {
+      console.error(
+        'An error occurred while rendering the initial result:',
+        err
+      )
       const errorRes = { statusCode: 500, err }
       try {
         result = await renderToHTML(
diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx
index dd53c1d13c9d290..f6ec26ca0aa1368 100644
--- a/packages/next/server/render.tsx
+++ b/packages/next/server/render.tsx
@@ -298,28 +298,35 @@ function createRSCHook() {
       entry = createFromReadableStream(renderStream)
       rscCache.set(id, entry)
 
-      const transfomer = new TransformStream({
-        start(controller) {
-          if (bootstrap) {
-            controller.enqueue(
+      let bootstrapped = false
+      const forwardReader = forwardStream.getReader()
+      const writer = writable.getWriter()
+      function process() {
+        forwardReader.read().then(({ done, value }) => {
+          if (bootstrap && !bootstrapped) {
+            bootstrapped = true
+            writer.write(
               `<script>(self.__next_s=self.__next_s||[]).push(${JSON.stringify([
                 0,
                 id,
               ])})</script>`
             )
           }
-        },
-        transform(chunk, controller) {
-          controller.enqueue(
-            `<script>(self.__next_s=self.__next_s||[]).push(${JSON.stringify([
-              1,
-              id,
-              decoder.decode(chunk),
-            ])})</script>`
-          )
-        },
-      })
-      forwardStream.pipeThrough(transfomer).pipeTo(writable)
+          if (done) {
+            writer.close()
+          } else {
+            writer.write(
+              `<script>(self.__next_s=self.__next_s||[]).push(${JSON.stringify([
+                1,
+                id,
+                decoder.decode(value),
+              ])})</script>`
+            )
+            process()
+          }
+        })
+      }
+      process()
     }
     return entry
   }