Bug: `FileTreePreparedInput` contains a `Symbol` key and is not serializable

Open

michaltarasiukopened 2mo ago

Prerequisites

I have searched for duplicate or closed issues
I have read the contributing guidelines

Describe the issue

FileTreePreparedInput includes a Symbol-keyed property (pathStorePreparedInputKind), making it non-serializable.

Passing this object from a Next.js Server Component to a Client Component triggers a serialization error, as Symbol values cannot cross the React Server Component (RSC) boundary.

Reproduction

page.tsx (Server Component):

export default async function Page({ params }: { params: Promise<{ projectId: string }> }) {
  const { projectId } = await params;
  const paths = await fetchProjectPaths(projectId);
  const preparedInput = prepareFileTreeInput(paths);

  return <FileTreeClient preparedInput={preparedInput} />;
}

file-tree.tsx (Client Component):

'use client';

export function FileTreeClient({ preparedInput }: { preparedInput: FileTreePreparedInput }) {
  const { model } = useFileTree({ preparedInput });

  return <FileTree model={model} />;
}

Error output:

Error: Only plain objects can be passed to Client Components from Server Components. Objects with symbol properties like pathStorePreparedInputKind are not supported.
  {preparedInput: {paths: ..., preparedPaths: ...}}
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

What browser(s) are you seeing the problem on?

No response

What version of @pierre/diffs are you using?

1.0.0-beta.6

Activity

No activity yet.