Error in dropdown?

[CreativeArtDesign]

What component (if applicable)

• URL for category:
• Component name: dropdown.tsx

Describe the bug ./app/components/ui/components/dropdown.tsx:14:3 Type error: Type 'ForwardRefExoticComponent<ButtonProps & RefAttributes>' is not assignable to type 'PropsOf["as"] & T & ClassNameOverride<T, ButtonRenderPropArg>["as"]'. Type 'ForwardRefExoticComponent<ButtonProps & RefAttributes>' is not assignable to type 'PropsOf["as"]'.

To Reproduce This is the warnings message Type error in nextjs and typscript can not npm run build but works in dev.

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Browser/Device (if applicable)

• OS: windows 11
• Browser Crome
• Version any

Additional context Nothing do add. Types script problem i think.

[RobinMalfait]

Hey!

Can you share a minimal reproduction repo so we can take a look? Currently I can't seem to reproduce this. The first things that comes to mind is that a different version of TypeScript and/or Headless UI is being used but hard to tell right now.

Catalyst demo app using JavaScript:

Downloads/catalyst-ui-kit-7/demo/javascript                                                                                                                                                                               v20.12.2 3s 14:40
❯ npm run build

> catalyst-demo@0.1.0 build
> next build

  ▲ Next.js 14.2.3

   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Linting and checking validity of types
 ✓ Collecting page data
 ✓ Generating static pages (8/8)
 ✓ Collecting build traces
 ✓ Finalizing page optimization

Route (app)                              Size     First Load JS
┌ ○ /                                    1.37 kB         155 kB
├ ○ /_not-found                          871 B          87.9 kB
├ ○ /events                              339 B           157 kB
├ ƒ /events/[id]                         1.36 kB         155 kB
├ ○ /orders                              1.37 kB         155 kB
├ ƒ /orders/[id]                         5.08 kB         159 kB
└ ○ /settings                            3.46 kB         158 kB
+ First Load JS shared by all            87 kB
  ├ chunks/23-db878029db793d05.js        31.5 kB
  ├ chunks/fd9d1056-187367407b805b2f.js  53.6 kB
  └ other shared chunks (total)          1.95 kB

○  (Static)   prerendered as static content
ƒ  (Dynamic)  server-rendered on demand

Catalyst demo app using TypeScript:

Downloads/catalyst-ui-kit-7/demo/typescript                                                                                                                                                                               v20.12.2 3s 14:41
❯ npm run build

> catalyst-demo@0.1.0 build
> next build

  ▲ Next.js 14.2.3

   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Linting and checking validity of types
 ✓ Collecting page data
 ✓ Generating static pages (8/8)
 ✓ Collecting build traces
 ✓ Finalizing page optimization

Route (app)                              Size     First Load JS
┌ ○ /                                    1.37 kB         155 kB
├ ○ /_not-found                          871 B          87.9 kB
├ ○ /events                              339 B           157 kB
├ ƒ /events/[id]                         1.36 kB         155 kB
├ ○ /orders                              1.37 kB         155 kB
├ ƒ /orders/[id]                         5.08 kB         159 kB
└ ○ /settings                            3.46 kB         158 kB
+ First Load JS shared by all            87 kB
  ├ chunks/23-db878029db793d05.js        31.5 kB
  ├ chunks/fd9d1056-187367407b805b2f.js  53.6 kB
  └ other shared chunks (total)          1.95 kB

○  (Static)   prerendered as static content
ƒ  (Dynamic)  server-rendered on demand

[stevelizcano]

@RobinMalfait If you create a new project, and follow the catalyst docs, you will see the error.

We have the same error in our project, which we think was caused by the latest update of headless UI.

To exactly repo:

• Follow the catalyst docs of setting up a project, especially where they say installing the libraries @latest
• Copy over catalyst template code
• Errors will show in Typescript for the catalyst components (specifically Dropdown, etc).

Right now Dropdown doesn't work with the latest headless UI release, 2.1.

[reinink]

Hey folks! Just trying to reproduce this issue, and so far I have not been able to. Here's what I've done:

I installed the latest version of Next.js:

npx create-next-app@latest my-project --typescript --eslint

Need to install the following packages:
  create-next-app@14.2.5
Ok to proceed? (y) y
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/jonathanreinink/my-project.

Next, I downloaded the latest version of Catalyst from the Tailwind UI website, and copied over the TypeScript components into the /src/component folder:

Next, I install the additional dependencies required by Catalyst:

npm install @headlessui/react framer-motion clsx

Finally, I updated the link.tsx file to use the recommended version from the Catalyst docs:

import * as Headless from '@headlessui/react'
import NextLink, { type LinkProps } from 'next/link'
import React, { forwardRef } from 'react'

export const Link = forwardRef(function Link(
  props: LinkProps & React.ComponentPropsWithoutRef<'a'>,
  ref: React.ForwardedRef<HTMLAnchorElement>
) {
  return (
    <Headless.DataInteractive>
      <NextLink {...props} ref={ref} />
    </Headless.DataInteractive>
  )
})

After doing all that I ran tsc --noEmit and got no TypeScript errors, and TypeScript appears to be working without any issues when I load these files – for example the dropdown.tsx file:

Looking at my package-lock.json file, I have typescript v5.5.4 and @headlessui/react v2.1.2 installed.

So at this point I'm honestly not sure what's going wrong, other than maybe the TypeScript version in your project is not compatible with Catalyst (as @RobinMalfait suggested).

Since we can't reproduce this on our end, I am going to close this issue for now, but if you're able to provide a minimum reproduction of this as a Git repo, I'd be more than happy to have a look at this again.

Thanks!

[emilianoabad]

I have the exact same problem. @stevelizcano did you manage to fix it?