nextjs - 💡(How to fix) Fix TS Plugin doesn't catch non-serializable props being passed to client components [1 comments, 2 participants]

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it. {foo: function foo} ^^^^^^^^^^^^ at stringify (<anonymous>) { digest: '3523004343' } Export encountered an error on /page: /, exiting the build. ⨯ Next.js build worker exited with code: 1 and signal: null error: script "build" exited with code 1

TL;DR

• The issue can be mitigated by ensuring that non-serializable props are not passed from server components to client components, potentially by using a different data structure or by explicitly marking functions as serializable.

Guidance

• Review the code to identify where non-serializable props are being passed from server components to client components.
• Consider using a library or utility function to serialize or transform non-serializable data before passing it to client components.
• Verify that the tsconfig.json and Next.js configurations are correctly set up to detect and prevent non-serializable props from being passed.
• Test the application with different scenarios to ensure that the issue is fully resolved and does not reappear at runtime.

Example

No specific code example can be provided without modifying the original code, but ensuring that functions are not directly passed as props can be achieved by calling the function and passing its result instead.

Notes

The provided environment information and package versions may influence the behavior and available solutions, but without further details, it's challenging to provide a more specific fix.

Recommendation

Apply workaround: The current issue seems to be related to how Next.js handles serializable props in dynamic server components. Until a more permanent solution is available, applying workarounds such as serializing data before passing it to client components or restructuring the code to avoid passing non-serializable props directly can help mitigate the issue.