(improve error message) Error: Functions cannot be passed directly to Client Components because they're not serializable.

[carlosbaraza]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
Platform: darwin
Arch: x64
Version: Darwin Kernel Version 21.5.0: Tue Apr 26 21:08:22 PDT 2022; root:xnu-8020.121.3~4/RELEASE_X86_64
Binaries:
Node: 16.17.1
npm: 8.15.0
Yarn: N/A
pnpm: 7.13.6
Relevant packages:
next: 13.0.1
eslint-config-next: N/A
react: 18.2.0
react-dom: 18.2.0

What browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

No response

Describe the Bug

Using /app/notes/[id]/error.tsx with Webpack (Turbopack doesn't support tailwind) would break and throw the following error. This seems to happen only with dynamic routes like /notes/[id]/error.tsx and not with /notes/error.tsx

Error: Functions cannot be passed directly to Client Components because they're not serializable.
  <... parallelRouterKey=... segmentPath=... loading=... hasLoading=... error={function} template=... notFound=... childProp=... rootLayoutIncluded=...>
                                                                              ^^^^^^^^^^
    at resolveModelToJSON (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1710:39)
    at Object.toJSON (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1081:40)
    at stringify (<anonymous>)
    at processModelChunk (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:163:36)
    at retryTask (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1823:50)
    at performWork (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1856:33)
    at AsyncLocalStorage.run (node:async_hooks:330:14)
    at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1934:55)
    at scheduleWork (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:52:25)
    at startWork (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1933:29)

Expected Behavior

error.tsx components should not throw errors.

Link to reproduction

https://stackblitz.com/edit/vercel-next-js-1aokay?file=app%2Fnotes%2F[id]%2Ferror.tsx

To Reproduce

Click the link in the browser to navigate to /notes/1

[icyJoseph]

I do believe error.tsx must be client components... According to docs: https://beta.nextjs.org/docs/routing/error-handling#error-boundaries

So while this is working as expected, perhaps a better error message should be introduced in the future.

[Baleksas]

What would be workaround in case I want to catch errors inside [id] page?

[icyJoseph]

What would be workaround in case I want to catch errors inside [id] page?

Mmm perhaps a proper client component to handle the error. As shown in the docs, or an error boundary around the code that might fail.

[karpolan]

In the beginning of error.tsx file please add:

'use client';

BTW. use client in backticks `` is not working :)

[carlosbaraza]

I do believe error.tsx must be client components... According to docs: https://beta.nextjs.org/docs/routing/error-handling#error-boundaries

So while this is working as expected, perhaps a better error message should be introduced in the future.

Thank you for the response. I guess this makes sense, however, the error message is just cryptic. And given the beta state of the feature, I thought it might be a bug.

[carlosbaraza]

I'll leave it open to track changing the error message. If a moderator thinks this would not be done, please close the ticket.

[AliSinaYOusofi]

"use client" at the start of your script will solve it.

[77pintu]

"use client" placed top of the line file in error.js ,
issue has been resolved .
Thanks for the good suggestions.

[jamesvclements]

I get this error when trying to use a client component that accepts a render function from a server component. Do I need to turn my server component into a client component to use render functions? Or is there a way to do both?

[MuhammadYounus09]

i faced this error recently and i solved to apply 'use client'; on error.js file

[mauriciabad]

I get this error when trying to use a client component that accepts a render function from a server component. Do I need to turn my server component into a client component to use render functions? Or is there a way to do both?

I have the same issue, and in my case I don't even have a render function declared, this message makes no sense...

UPDATE

It turns out I was passing an Icon component inside an object inside a prop... But in the message, there was no clue about what was this mysterious render prop.

So I ended up passing a string of the icon name as a prop, and inside the component keeping a map with the icon names and Icons, but this is not ideal because it loads all icon always. This stack overflow answer helped me find a solution: https://stackoverflow.com/a/76615189/8662476

[hamza-ahad-cygnis]

where can i find error.tsx file
i don't have one. I'm using next 14.