[component] Importing a button in a form component that uses a server action throws an error.

[cmollinea]

Hi there!

As the title describes iam facing this error:

Ecmascript file had an error
  2 | import { generateRandomOTP } from '../lib/utils';
  3 | import { encodeBase32 } from '@oslojs/encoding';
> 4 | import { cookies } from 'next/headers';
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  5 | import sessionService from '@/services/session';
  6 |
  7 | // export async function checkEmailAvailability(email: string): Promise<boolean> {

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

The fun thing is that if i use ar egular button tag everything works, if i use buttonVariants() the error is there again, iam guessing that the error maybe is cva but i dont know what to do...