diff --git a/.changeset/tasty-owls-watch.md b/.changeset/tasty-owls-watch.md new file mode 100644 index 000000000..8d0eb53f4 --- /dev/null +++ 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 index 166eb01cd..cacaf7dd0 100644 --- 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('\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 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 {