Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[bug]: Next 15 docs incorrectly state that CMDK works with react 19 #6200

Open
2 tasks done
mathi123 opened this issue Dec 28, 2024 · 8 comments
Open
2 tasks done

[bug]: Next 15 docs incorrectly state that CMDK works with react 19 #6200

mathi123 opened this issue Dec 28, 2024 · 8 comments
Labels
bug Something isn't working

Comments

@mathi123
Copy link

Describe the bug

The docs state that cmdk works with react 19, but it does not?

Affected component/components

Command

How to reproduce

  1. Create a Next project
  2. Install shadcn command component
  3. Create a build
npx create-next-app@latest cmdk-react-19 --yes
cd cmdk-react-19
npx shadcn@latest add command
npm run build

Codesandbox/StackBlitz link

https://stackblitz.com/edit/stackblitz-starters-v3swgmy5

Logs

> [email protected] build
> next build

   ▲ Next.js 15.1.3

   Creating an optimized production build ...
(node:43401) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:43403) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
 ✓ Compiled successfully
   Linting and checking validity of types  ...Failed to compile.

./components/ui/command.tsx:12:20
Type error: Type 'ForwardRefExoticComponent<Children & Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }, "key" | ... 1 more ... | keyof HTMLAttributes<...>> & { ...; } & RefAttributes<...>> & { ...; }' does not satisfy the constraint 'keyof IntrinsicElements | ForwardRefExoticComponent<any> | (new (props: any) => Component<any, {}, any>) | ((props: any) => ReactNode)'.
  Type 'ForwardRefExoticComponent<Children & Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }, "key" | ... 1 more ... | keyof HTMLAttributes<...>> & { ...; } & RefAttributes<...>> & { ...; }' is not assignable to type 'ForwardRefExoticComponent<any>'.
    Type 'import("/Users/mathii/projects/cmdk-react-19/node_modules/cmdk/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
      Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
        Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.

  10 |
  11 | const Command = React.forwardRef<
> 12 |   React.ElementRef<typeof CommandPrimitive>,
     |                    ^
  13 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive>
  14 | >(({ className, ...props }, ref) => (
  15 |   <CommandPrimitive

System Info

MacOS
Node v22.12.0

Before submitting

  • I've made research efforts and searched the documentation
  • I've searched for existing issues
@mathi123 mathi123 added the bug Something isn't working label Dec 28, 2024
@sp88011
Copy link

sp88011 commented Jan 6, 2025

updating cmdk to 1.0.4 resolved this for me

@mathi123
Copy link
Author

@sp88011 confirmed, I've bumped the version in #6332

@hussainzs
Copy link

Thank you for pointing this out and for the fix. I'm commenting for clarity

Until Shadcn fixes this, updating CMDK to version 1.0.4 resolves the errors. Here is how to do it:

  1. Open your package.json file.
  2. Locate the line under dependencies that says "cmdk": "^1.0.0".
  3. Change it to "cmdk": "^1.0.4".
  4. Save the file.
  5. Run npm install in your terminal.
  6. If you encounter errors due to package incompatibility with React 19, try running npm install --legacy-peer-deps.

@r0bdiabl0
Copy link

r0bdiabl0 commented Jan 23, 2025

Thank you so much for this!!! I was going crazy all day trying to figure out how something that was working started failing at build time when i didn't change anything. But I did reinstall the command component. Changing to 1.0.4 fixed it.

@AKULADES
Copy link

AKULADES commented Feb 3, 2025

@sp88011 confirmed, thanks !!

@Zahid40
Copy link

Zahid40 commented Feb 14, 2025

Thank you , cmdk 1.0.0 to 1.0.4 work for me

@beni75
Copy link

beni75 commented Mar 4, 2025

Thank you so much

@e-afzal
Copy link

e-afzal commented Mar 4, 2025

Updating the CMDK package to version 1.0.4 worked for me. Thanks a ton! ✌🏻

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants