nextjs - 💡(How to fix) Fix Next.js 16: Serialization timing issue with unstable_cache causes "Objects are not valid as a React child" error [1 comments, 2 participants]

TL;DR

To fix the React rendering errors caused by non-enumerable __internal properties when using unstable_cache with Payload CMS Lexical rich text in Next.js 16, apply a workaround that serializes the data before passing it to the Lexical Client Component.

Guidance

• Identify the specific component or function where the unstable_cache is being used and verify that the data being passed to the Lexical Client Component is the cause of the error.
• Apply the provided workaround by serializing the data using JSON.parse(JSON.stringify(data)) before passing it to the component.
• Test the workaround to ensure it resolves the React rendering errors.
• Consider exploring alternative caching solutions that do not return unserialized objects on the first invocation.

Example

const page = await getPageById()
const safePage = JSON.parse(JSON.stringify(page))
return <RichText data={safePage.content} />

Notes

This workaround may have performance implications due to the additional serialization step, and it may not be suitable for all use cases. Further investigation into alternative caching solutions or updates to the unstable_cache implementation may be necessary.

Recommendation

Apply the workaround, as it provides a temporary solution to the React rendering errors caused by the non-enumerable __internal properties. This workaround allows for continued use of the unstable_cache with Payload CMS Lexical rich text in Next.js 16 until a more permanent solution is available.