"You're importing a component that needs next/headers. That only works in a Server Component which is not supported in the pages/ directory"-error

Question

I'm following this tutorial to create a preview mode in Sanity. But when importing:

import { draftMode } from 'next/headers';

into client.ts I'm getting this error:

Error: × You're importing a component that needs next/headers. That only works in a Server Component which is not supported in the pages/ directory. Read more: https://nextjs.org/docs/getting-started/ │ react-essentials#server-components

Which is super weird. Cus I'm using next version 14.1.0 and app router, don't even have a /pages directory. Have no idea how to continue to debug this, any ideas?

Answer 1

After many hours of debugging, I found the solution.

The Problem:

You can't import server components into client components. This is what is causing that error.

The Solution:

If you import client from sanity/lib/client.ts into a file that uses useEffect (aka a client component), you will get that error.

Look for a useEffect and instead of importing the client, use the useClient hook like so:

const studioClient = useClient({ apiVersion: "2024-08-01" }).

More info on useClient in the v2 to v3 documentation

In my case, the problem was a custom input component called AsyncInput. I had made it by finding a solution in the sanity exchange that used Studio v2.

Hopefully this helps!