Docs: using example code from app router 'error handling' page seems to trigger NEXT_TS_ERRORS.INVALID_CLIENT_ENTRY_PROP warning

[philwolstenholme]

What is the improvement or update you wish to see?

Copying this example from https://beta.nextjs.org/docs/routing/error-handling into a file called src/app/(main)/product/[id]/error.tsx:

'use client'; // Error components must be Client components

import { useEffect } from 'react';

export default function Error({
  error,
  reset,
}: {
  error: Error;
  reset: () => void;
}) {
  useEffect(() => {
    // Log the error to an error reporting service
    console.error(error);
  }, [error]);

  return (
    <div>
      <h2>Something went wrong!</h2>
      <button
        onClick={
          // Attempt to recover by trying to re-render the segment
          () => reset()
        }
      >
        Try again
      </button>
    </div>
  );
}

Results in a Props must be serializable for components in the "use client" entry file, "reset" is invalid.ts TypeScript warning from the packages/next/src/server/typescript/rules/client-boundary.ts rule.

Is there any context that might help us understand?

I copied the code as-is from the docs and got the warning

Does the docs page already exist? Please link to it.

https://beta.nextjs.org/docs/routing/error-handling

[MahirPatel3130]

maybe the problem is that reset function is not get serialized when it gets passed as props, so maybe you can useCallback() hook by which same function instance on subsequent renders as long as its dependencies have not changed.

[MahirPatel3130]

[MahirPatel3130]

You can try this out maybe this can work.

[bramarcade]

I'm having the same problem. (I tried using a callback and that didn't work either.)

Is there a way to declare a client component such that it can only accept props from other client components? That would obviate the serializability concern and probably stop the warning.

[philwolstenholme]

I wonder if this is related to this other issue that I am having? #46637 (comment)

[MahirPatel3130]

I'm having the same problem. (I tried using a callback and that didn't work either.)

Is there a way to declare a client component such that it can only accept props from other client components? That would obviate the serializability concern and probably stop the warning.

RIght now, maybe there is not any way to declare other client component since as we know that the problem is in reset function which is not get serialzied either way.

[MahirPatel3130]

So, maybe right now it's better to wait for the version 13 get production ready first because still the docs is unclear and not completely correct.

[philwolstenholme]

Ah, this issue is a duplicate of #46573, which is now fixed (I guess the fix will be in the next release)

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.