LUM4007: Non-serializable awaited value

Severity: error · Category: islands and boundaries (4xxx)

Reported by: the server runtime, with the path of the offending value.

#What it means

Values awaited in an island's async components are recorded during SSR and replayed during hydration, so they are serialized into the page. A cached value (fetchJSON, query(key, fn)) that an island awaited is sent once with the page, for the browser cache. A Response, a class instance, a function or a stream cannot be.

#Example

export async function Stock({ sku }: { sku: string }) {
  const res = await fetch(`/api/stock/${sku}`);
  const data = await res.json();
  return <p>{data.count}</p>;
}

#How to fix it

Await plain data: const data = await fetchJSON<Stock>(/api/stock/${sku}). For query(), map the result to plain objects inside its function. Remember that every value awaited inside an island ends up in the HTML; never await secrets there.

#Related

• Async components
• Islands