Next.js Application Not Building During Deployment on Vercel

[onyx tendon]

**Issue Description: **I'm trying to deploy a Next.js application on Vercel, but I'm encountering build errors during the deployment phase. My goal is to have the app build successfully without errors so it can be deployed properly.

import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "@/lib/utils";

const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline: "border border-input hover:bg-accent hover:text-accent-foreground",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "underline-offset-4 hover:underline text-primary",
      },
      size: {
        default: "h-10 py-2 px-4",
        sm: "h-9 px-3 rounded-md",
        lg: "h-11 px-8 rounded-md",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
);

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean;
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button";
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    );
  }
);
Button.displayName = "Button";

export { Button, buttonVariants };

[crystal viper]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[onyx tendon]

The error seems to be related to the usage of the Slot component from the @radix-ui/react-slot package. The relevant code snippet from my button.tsx file is the one pasted in the initial post.

Error Logs: During deployment on Vercel, I receive the following error:

Type error: Cannot find name 'Slot'.
I’ve Tried:

• Verified that @radix-ui/react-slot is correctly listed in package.json under dependencies.
• Cleared Vercel cache and redeployed the application.
• Checked the import statements and module resolution settings in tsconfig.json.
• Attempted to redeploy with cache cleared on Vercel, but the same error persists.

I’m looking for guidance on how to resolve this build error on Vercel. Is there something I might be missing with the @radix-ui/react-slot package or Vercel configuration that could be causing this issue?

Thx

[dusty ingot]

can you run yarn build locally?

[onyx tendon]

How would I do that?

[dusty ingot]

yarn build

[onyx tendon]

I got yarn build working but I just get a blank screen? I'm building in replit where I can see the actual frontend, a bit lost here

[dusty ingot]

so yarn build works locally, but doesn't build on vercel

to run the server in prod mode you run yarn start after yarn build

[onyx tendon]

is this local host version accurate to what will be made if i run build on deployment? or is their some difference considering that I ahve not changed the code

[onyx tendon]

@dusty ingot

[dusty ingot]

if yarn build and yarn start work locally then it should work the same on vercel

[onyx tendon]

im using index.tsx

appreciate all the help, ill be closing this request

[dusty ingot]

plz

[brazen copper]

which message would you say solves this thread? i can mark one message and just wasnt sure as i didnt help here.

[dusty ingot]

What helped you the most?

You said it was resolved somehow

[brazen copper]

im not op

i just have helper role which allows me to mark solution on OP's behalf

[dusty ingot]

Prob this?