diff options
| author |  Benjamin Holmes <bholmesdev@gmail.com>
| 2022-09-07 19:41:37 -0400 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-09-07 19:41:37 -0400 |
| commit | 9290b24143d753edd3daf25945990c25a58e5bde (patch) | |
| tree | 7502216ff8b412595d16ea12ef329501fdf6384d | |
| parent | 4b73d347443c25770fe80020d350eb709927dd10 (diff) | |
| download | astro-9290b24143d753edd3daf25945990c25a58e5bde.tar.gz astro-9290b24143d753edd3daf25945990c25a58e5bde.tar.zst astro-9290b24143d753edd3daf25945990c25a58e5bde.zip | |
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>
| -rw-r--r-- | .changeset/tasty-owls-watch.md | 6 | ||||
| -rw-r--r-- | packages/astro/src/runtime/server/render/page.ts | 5 | ||||
| -rw-r--r-- | packages/integrations/react/server.js | 27 |
3 files changed, 30 insertions, 8 deletions
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('<!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 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 { |