LUM4002: Non-serializable island prop

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

Reported by: lumiose check and the language server, at the prop, when its declared type cannot be serialized; otherwise the server runtime, with the path of the offending value.

#What it means

Island props travel from the server to the browser as data-only JSON. Supported: JSON values plus undefined, NaN/Infinity, BigInt, Date, URL, Map and Set. Functions, symbols, class instances, promises and cycles cannot be serialized. SPA routes get the same rule for their data, so request, cookies and locals are not passed in.

#At check time

With a client:* directive, the JSX types check each prop against its serializable form: a prop whose declared type is a function, a symbol, a promise or an object with methods (a class instance) only accepts undefined. lumiose check and the editor report the TypeScript error as LUM4002 on the prop:

src/routes/page.stsx:2:36 - error LUM4002: Island prop `onSave` is not serializable: it is a function. Island props are sent to the browser as data.

The same component without a directive is a server component and takes its props as declared. Props typed JSX.Element (slots), unknown or any are not checked; values TypeScript cannot see through (a class instance without methods, a cycle) are still reported by the server when the page renders.

#Example

export default function Page() {
  return <Editor client:load onSave={(text: string) => save(text)} />;
}

#How to fix it

Pass data only. Do the work inside the island (it can call an endpoint with fetchJSON or post a form with submit()), or convert values to plain objects before passing them.

#Related

• Islands
• Data and actions