Fix: className does not exist on type AlertDialogPortalProps

[behzadam]

I get this error message and seems it comes from Radix UI: Type error: Property 'className' does not exist on type 'AlertDialogPortalProps' Source

[brocchirodrigo]

This issue is affecting three components: "alert-dialog", "dialog", "sheet".

[behzadam]

This issue is affecting three components: "alert-dialog", "dialog", "sheet".

Oh I didn't see! that's right.

[vadimsdev]

I have the same issue, for now fix is to downgrade @radix-ui/react-dialog to version 1.0.4.

[grayashh]

I have the same issue, for now fix is to downgrade @radix-ui/react-dialog to version 1.0.4.

In my case, downgrading to version 1.0.4 does not resolve this issue.

[Shriansh2002]

Did anybody found any fix for this ?

[Michele-x98]

Make sure to downgrade both alert-dialog and dialog to 1.0.4 if you are using both, in my case it solved the problem

[GGalupo]

This is the commit that changed the types of DialogPortalProps:

https://github.com/radix-ui/primitives/commit/f873591ac32c31df9e860d3b6fc65be3cb910ba4#diff-18be67c22def126bf675c06beb358c92a4a8c6d1a071adf162fcd5ac9cac18bd

[rick-ame]

I created a global declaration file types/fix.d.ts under the root folder and added the codes as a temporary fix

import '@radix-ui/react-dialog'

declare module '@radix-ui/react-dialog' {
  export interface DialogPortalProps {
    className?: string
  }
}

it works for me.

[Shriansh2002]

Thanks @rick-ast for the temporary fix 👍

[lachieh]

Closed with #1603 and released in 0.4.1. To resolve, run:

npx shadcn-ui@latest add dialog

[anthonyverducci]

@lachieh this fix resolved the issue with the alert and alert-dialog components, but I'm still getting the same error with the sheet component.

[lachieh]

Thanks, @anthonyverducci. #1606 should resolve the sheet component. The diff is pretty simple if you want to make the change yourself before the PR is merged.

[artimath]

I'm getting same error when I install using the latest Bun command.

#12 10.68 Failed to compile.
#12 10.68
#12 10.68 ./src/components/ui/sheet.tsx:17:3
#12 10.68 Type error: Property 'className' does not exist on type 'DialogPortalProps'.
#12 10.68
#12 10.68   15 |
#12 10.68   16 | const SheetPortal = ({
#12 10.68 > 17 |   className,
#12 10.68      |   ^
#12 10.68   18 |   ...props
#12 10.68   19 | }: SheetPrimitive.DialogPortalProps) => (
#12 10.68   20 |   <SheetPrimitive.Portal className={cn(className)} {...props} />
#12 10.77 error: script "build" exited with code 1 (SIGHUP)

#12 ERROR: process "/bin/bash -ol pipefail -c bun run build" did not complete successfully: exit code: 1
-----
> [stage-0  8/10] RUN --mount=type=cache,id=s/81853af6-70a2-446e-8592-293123034686-next/cache,target=/app/.next/cache --mount=type=cache,id=s/81853af6-70a2-446e-8592-293123034686-node_modules/cache,target=/app/node_modules/.cache bun run build:
10.68 Type error: Property 'className' does not exist on type 'DialogPortalProps'.
10.68
10.68   15 |
10.68   16 | const SheetPortal = ({
10.68 > 17 |   className,
10.68      |   ^
10.68   18 |   ...props
10.68   19 | }: SheetPrimitive.DialogPortalProps) => (

10.68   20 |   <SheetPrimitive.Portal className={cn(className)} {...props} />
10.77 error: script "build" exited with code 1 (SIGHUP)

Resolved when I use the npx command.

[Shriansh2002]

Yes @artimath, Issue #707 already exist, I am also waiting for Bun Support

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.