I am adding a error.tsx page that I am copy pasting from the next documentation.

'use client';

import { useEffect } from 'react';

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  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>
  );
}

Please note, the first line is defining 'use client' directive.

But when I try run the app I am getting this error:

ReactServerComponentsError:
./app/dev/error.tsx must be a Client Component. Add the "use client" directive the top of the file to resolve this issue.

I'm having what seems to be exactly the same issue as this person: https://nextjs-forum.com/post/1127854907756662836 but that query seems to have not got anywhere. Hoping to have a better shot here.

I am using next 13.4.4 in a nx monorepo.