Next.js Discord

Discord Forum

Next.js Application Not Building During Deployment on Vercel

Answered
Gharial posted this in #help-forum
Open in Discord
GharialOP
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 * as React from "react";
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 };
Answered by Keyhole wasp
if yarn build and yarn start work locally then it should work the same on vercel
View full answer

19 Replies

GharialOP
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
Keyhole wasp
can you run yarn build locally?
GharialOP
How would I do that?
Keyhole wasp
yarn build
GharialOP
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
Keyhole wasp
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
GharialOP
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
GharialOP
@Keyhole wasp
Keyhole wasp
if yarn build and yarn start work locally then it should work the same on vercel
Answer
GharialOP
im using index.tsx
appreciate all the help, ill be closing this request
Keyhole wasp
plz
@Keyhole wasp plz
which message would you say solves this thread? i can mark one message and just wasnt sure as i didnt help here.
Keyhole wasp
What helped you the most?
You said it was resolved somehow
@Keyhole wasp What helped you the most?
im not op
i just have helper role which allows me to mark solution on OP's behalf