Prefetch error for dynamic route

[e16m]

I'm seeing an issue at this point in the tutorial:

function Note({ note }: any) {
  const { id, title, content, created } = note || {};

  return (
    **<Link href={`/notes/${id}`}>**
      <div className={styles.note}>
        <h2>{title}</h2>
        <h5>{content}</h5>
        <p>{created}</p>
      </div>
    </Link>
  );
}

When I change it to "/" or "/notes" it works fine, but when I try to do this I get the following error:

PREFETCH ERROR Error: Functions cannot be passed directly to Client Components because they're not serializable.

Does anyone know how to handle this error? I have been researching this for the past few hours but no luck so far.. thanks.

[suti1979]

same here... :(

[jameshd]

Yep same here. I found deleting the error.tsx got rid of it... not sure why it happens though...

[jameshd]

#3 this fixes it... basically 'use client';

[e16m]

@jameshd thanks for sharing!