[bug]: WEBPACK_IMPORTED_MODULE_9__.buttonVariants is not a function

Describe the bug

So I'm trying to use buttonVariants to customize the Next.js <Link> component as a button but I got this error:

Error: (0 , _components_ui_Button__WEBPACK_IMPORTED_MODULE_9__.buttonVariants) is not a function

This is how it looks: Button.tsx:

const buttonVariants = cva(
  'inline-flex items-center justify-center gap-2 whitespace-nowrap px-4 py-3 btn-lg-regular transition disabled:pointer-events-none disabled:cursor-not-allowed',
  {
    variants: {
      variant: {
        primary:
          'bg-purple-600 text-white hover:bg-purple-500 rounded-sm focus:bg-purple-400 focus:rind-white focus:ring-2 focus:ring-offset-1 disabled:text-grey-400 disabled:bg-grey-100',
        secondary:
          'bg-transparent text-purple-900 border rounded-sm border-purple-900 hover:text-purple-500 hover:border-purple-500 focus:shadow-[0px_0px_2px_2px_#8F7BA5] focus:border-purple-400 focus:text-purple-400 disabled:border-grey-300 disabled:text-grey-300',
        text: 'bg-transparent border border-white border-b-purple-500 !px-1 text-purple-500 !rounded-none focus:rounded-sm focus:border-purple-500 disabled:text-grey-400 disabled:border-b-grey-300',
        'icon-primary':
          'border-white text-black fill-black rounded-sm hover:text-purple-500 hover:fill-purple-500 focus:shadow-[0px_0px_2px_2px_#8F7BA5] focus:text-purple-400 focus:fill-purple-400 disabled:text-grey-400 disabled:fill-grey-400',
        'icon-secondary':
          'bg-[rgba(12,_11,_11,_0.48)] text-white rounded-sm fill-white hover:bg-grey-500 hover:fill-grey-500 focus:shadow-[0px_0px_2px_2px_rgba(0,_0,_0,_0.25)] focus:bg-beige-600 focus:fill-beige-600 disabled:grey-300 disabled:fill-grey-300',
      },
      size: {
        lg: 'h-[48px] px-4 py-3 btn-lg-regular',
        md: 'h-[40px] py-[10px] px-4 btn-lg-regular',
        sm: 'h-[32px] py-[8px] px-4 btn-sm-regular',
        icon: 'h-[48px] w-[48px]',
      },
    },
    defaultVariants: {
      variant: 'primary',
      size: 'md',
    },
  }
);

page.tsx (server side):

import { buttonVariants } from '@/components/ui/Button';

...
 <Link
     href='#'
     className={cn(buttonVariants({ variant: 'text' }))}
>
    Order <OutwardIcon />
</Link>

This error occurs only on the server side. If I add a 'use client' directive for the component/page then it works. That's weird; honestly, I don't know why this error happened, I haven't faced this error before.

Affected component/components

Button

How to reproduce

Install the Button component
Customize component with buttonVariants functions
Run the server-side component with it

Codesandbox/StackBlitz link

No response

Logs

⨯ src\app\page.tsx (73:46) @ HomePage
 ⨯ TypeError: (0 , _components_ui_Button__WEBPACK_IMPORTED_MODULE_9__.buttonVariants) is not a function
    at HomePage (./src/app/page.tsx:190:168)
    at stringify (<anonymous>)
digest: "708039026"
  71 |               <Link
  72 |                 href='#'
> 73 |                 className={cn(buttonVariants({ variant: 'text' }))}
     |                                              ^
  74 |               >
  75 |                 Order <OutwardIcon />
  76 |               </Link>
 GET /_next/static/webpack/c08a93c280cc41ca.webpack.hot-update.json 404 in 2352ms

System Info

Next.js version:
`"next": "14.2.3"`

Radix UI slot component just in case:
`"@radix-ui/react-slot": "^1.0.2"`

Google Chrome version:
`125.0.6422.142`

Before submitting

[X] I've made research efforts and searched the documentation
[X] I've searched for existing issues

shadcn-ui / ui

[bug]: WEBPACK_IMPORTED_MODULE_9__.buttonVariants is not a function #3966