shopify/app-bridge-react conflicting with shadcn UI Type 'string' is not assignable to type 'null | undefined

[khanakia]

I have @shopify/app-bridge-react": "^4.2.7 installed with shadcn and somehow it's conflicting with variant prop not sure why

Type 'string' is not assignable to type 'null | undefined'.ts(2322)
shopify.ts(645, 5): The expected type comes from property 'variant' which is declared here on type 'IntrinsicAttributes & ClassAttributes<HTMLButtonElement> & ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<...> & { ...; }'

[Enard52]

This error occurs because @shopify/app-bridge-react extends/pollutes the global JSX HTMLButtonElement attributes with its own custom variant prop type definition (which expects null | undefined or Shopify-specific variant tokens), conflicting with CVA's (class-variance-authority) VariantProps<typeof buttonVariants>.

The Solution: Omit variant from ButtonProps

Open your components/ui/button.tsx and explicitly omit variant from React.ButtonHTMLAttributes<HTMLButtonElement> before intersecting with VariantProps:

// components/ui/button.tsx

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

Why this works

By wrapping React.ButtonHTMLAttributes<HTMLButtonElement> in Omit<..., "variant">, you strip the global variant property definition injected by @shopify/app-bridge-react, allowing CVA's type-safe variant variants (default, destructive, outline, secondary, ghost, link) to take full control without any type collisions.