Fix component frameworks on Vercel Edge (#4667)

bholmesdev · web-flow · commit 9290b24143d7 · 2022-09-07T19:41:37.000-04:00
* fix: use while instead of "for await" in react integration

* fix: cast HTML to string to fix other integrations

* docs: add comment on encode(String(html))

* chore: changeset

Co-authored-by: bholmesdev &lt;hey@bholmes.dev&gt;
diff --git a/.changeset/tasty-owls-watch.md b/.changeset/tasty-owls-watch.md
@@ -0,0 +1,6 @@
+---
+'astro': patch
+'@astrojs/react': patch
+---
+
+Fix framework components on Vercel Edge
diff --git a/packages/astro/src/runtime/server/render/page.ts b/packages/astro/src/runtime/server/render/page.ts
@@ -79,7 +79,10 @@ export async function renderPage(
 										controller.enqueue(encoder.encode('<!DOCTYPE html>\n'));
 									}
 								}
-								controller.enqueue(encoder.encode(html));
+								// Convert HTML object to string
+								// for environments that won't "toString" automatically
+								// (ex. Cloudflare and Vercel Edge)
+								controller.enqueue(encoder.encode(String(html)));
 								i++;
 							}
 							controller.close();
diff --git a/packages/integrations/react/server.js b/packages/integrations/react/server.js
@@ -135,14 +135,27 @@ async function renderToStaticNodeStreamAsync(vnode) {
 	});
 }
 
+/**
+ * Use a while loop instead of "for await" due to cloudflare and Vercel Edge issues
+ * See https://github.com/facebook/react/issues/24169
+ */
+async function readResult(stream) {
+  const reader = stream.getReader();
+  let result = '';
+  const decoder = new TextDecoder('utf-8')
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) {
+      return result;
+    }
+    result += decoder.decode(value, { stream: true });
+  }
+}
+
 async function renderToReadableStreamAsync(vnode) {
-	const decoder = new TextDecoder();
-	const stream = await ReactDOM.renderToReadableStream(vnode);
-	let html = '';
-	for await (const chunk of stream) {
-		html += decoder.decode(chunk);
-	}
-	return html;
+	return await readResult(
+		await ReactDOM.renderToReadableStream(vnode),
+	);
 }
 
 export default {

Original file line number	Diff line number	Diff line change
`@@ -79,7 +79,10 @@ export async function renderPage(`
`79`	`79`	`controller.enqueue(encoder.encode('<!DOCTYPE html>\n'));`
`80`	`80`	`}`
`81`	`81`	`}`
`82`		`- controller.enqueue(encoder.encode(html));`
	`82`	`+ // Convert HTML object to string`
	`83`	`+ // for environments that won't "toString" automatically`
	`84`	`+ // (ex. Cloudflare and Vercel Edge)`
	`85`	`+ controller.enqueue(encoder.encode(String(html)));`
`83`	`86`	`i++;`
`84`	`87`	`}`
`85`	`88`	`controller.close();`