Fix component frameworks on Vercel Edge (#4667)

* 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 <hey@bholmes.dev>

1 files changed, 20 insertions, 7 deletions

diff --git a/packages/integrations/react/server.js b/packages/integrations/react/server.js
index fea6518d8..76e7f01e7 100644
--- 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 {