diff --git a/packages/astro/src/runtime/server/hydration.ts b/packages/astro/src/runtime/server/hydration.ts index 5d4c07a09463..972d8db8a921 100644 --- a/packages/astro/src/runtime/server/hydration.ts +++ b/packages/astro/src/runtime/server/hydration.ts @@ -159,7 +159,7 @@ export async function generateHydrateScript( if (renderer.clientEntrypoint) { island.props['component-export'] = componentExport.value; island.props['renderer-url'] = await result.resolve(decodeURI(renderer.clientEntrypoint)); - island.props['props'] = escapeHTML(serializeProps(props)); + island.props['props'] = escapeHTML(serializeProps(props, metadata.displayName)); } island.props['ssr'] = ''; diff --git a/packages/astro/src/runtime/server/render/component.ts b/packages/astro/src/runtime/server/render/component.ts index d686c440e0be..9577174f177c 100644 --- a/packages/astro/src/runtime/server/render/component.ts +++ b/packages/astro/src/runtime/server/render/component.ts @@ -16,6 +16,7 @@ import type { SSRLoadedRenderer, SSRResult, } from '../../../types/public/internal.js'; +import { serializeProps } from '../serialize.js'; import { Fragment, type RenderDestination, @@ -28,7 +29,6 @@ import { maybeRenderHead } from './head.js'; import { containsServerDirective, renderServerIsland } from './server-islands.js'; import { type ComponentSlots, renderSlotToString, renderSlots } from './slot.js'; import { formatList, internalSpreadAttributes, renderElement, voidElementNames } from './util.js'; -import { serializeProps } from '../serialize.js'; const needsHeadRenderingSymbol = Symbol.for('astro.needsHeadRendering'); const rendererAliases = new Map([['solid', 'solid-js']]); @@ -331,6 +331,7 @@ If you're still stuck, please open an issue on GitHub or join us at https://astr const astroId = shorthash( `\n${html}\n${serializeProps( props, + metadata.displayName, )}`, ); diff --git a/packages/astro/src/runtime/server/serialize.ts b/packages/astro/src/runtime/server/serialize.ts index e833090feef4..bd7185e84125 100644 --- a/packages/astro/src/runtime/server/serialize.ts +++ b/packages/astro/src/runtime/server/serialize.ts @@ -1,10 +1,14 @@ import { uneval } from 'devalue'; -export function serializeProps(props: Record) { +export function serializeProps(props: Record, componentName: string) { // Remove symbolic keys as devalue can't handle them and they don't really make sense to be // serialized as symbolic keys aren't really equal between the client and server realms if (Object.getOwnPropertySymbols(props).length) { props = Object.fromEntries(Object.entries(props).filter(([key]) => typeof key !== 'symbol')); } - return uneval(props); + try { + return uneval(props); + } catch (e) { + throw new Error(`Unable to serialize props for <${componentName} />`, { cause: e }); + } }