shadcn-ui / ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://ui.shadcn.com
MIT License
58.58k stars 3.19k forks source link

[bug]: Combobox example does not work with cmdk@1.0.0 #3605

Closed wootra closed 2 weeks ago

wootra commented 2 weeks ago

Describe the bug

I had a weird error that is caused from cmdk library. Currently, the documentation does not warn about cmdk@1.0.0 version just telling to install the latest version, and I get this error.

chunk-XY2OZXVN.js?v=92362472:16659 Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
    at Function.from (<anonymous>)
    at A (cmdk.js?v=599d1b8c:171:18)
    at U2 (cmdk.js?v=599d1b8c:137:13)
    at cmdk.js?v=599d1b8c:97:34
    at cmdk.js?v=599d1b8c:365:31
    at Map.forEach (<anonymous>)
    at cmdk.js?v=599d1b8c:365:15
    at commitHookEffectListMount (chunk-XY2OZXVN.js?v=92362472:16904:34)
    at commitLayoutEffectOnFiber (chunk-XY2OZXVN.js?v=92362472:16992:23)
    at commitLayoutMountEffects_complete (chunk-XY2OZXVN.js?v=92362472:17976:17)

I tried to change the version to direct previous version, and it work as expected.

Affected component/components

Combobox, Command

How to reproduce

  1. installation for reproduction project - following this

✔ Would you like to use TypeScript (recommended)? … yes ✔ Which style would you like to use? › Default ✔ Which color would you like to use as base color? › Zinc ✔ Where is your global CSS file? … src/globals.css ✔ Would you like to use CSS variables for colors? … yes ✔ Are you using a custom tailwind prefix eg. tw-? (Leave blank if not) … ✔ Where is your tailwind.config.js located? … tailwind.config.js ✔ Configure the import alias for components: … @/components ✔ Configure the import alias for utils: … @/lib/utils ✔ Are you using React Server Components? … no ✔ Write configuration to components.json. Proceed? … yes

  1. install combobox

    • following process in here
    • install Popover (npx shadcn-ui@latest add popover)
    • install Command (npx shadcn-ui@latest add command)
    • install Button (npx shadcn-ui@latest add button)
    • install @radix-ui/react-icons (npm i @radix-ui/react-icons)
    • so far, installed dependency is this:

      {
      "@radix-ui/react-dialog": "^1.0.5",
      "@radix-ui/react-popover": "^1.0.7",
      "@radix-ui/react-slot": "^1.0.2",
      "@radix-ui/react-icons": "^1.3.0",
      "class-variance-authority": "^0.7.0",
      "clsx": "^2.1.1",
      "cmdk": "^1.0.0",
      "lucide-react": "^0.373.0",
      "react": "^18.2.0",
      "react-dom": "^18.2.0",
      "tailwind-merge": "^2.3.0",
      "tailwindcss-animate": "^1.0.7"
      }

      cmdk-bug-test.zip

  2. make Combobox following here

  3. import it. main.tsx

    
    import ReactDOM from 'react-dom/client';
    import { ComboboxDemo } from '@/Combobox';
    import './globals.css';

ReactDOM.createRoot(document.getElementById('root')!).render();


Now you can see a combo box in the page, but when you click it, it crash the app with the error message:
```console
chunk-B27YY5WJ.js?v=2667d1d7:16691 Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
    at Function.from (<anonymous>)
    at A (cmdk.js?v=aa178e46:171:18)
    at U2 (cmdk.js?v=aa178e46:137:13)
    at cmdk.js?v=aa178e46:97:34
    at cmdk.js?v=aa178e46:365:31
    at Map.forEach (<anonymous>)
    at cmdk.js?v=aa178e46:365:15
    at commitHookEffectListMount (chunk-B27YY5WJ.js?v=2667d1d7:16936:34)
    at commitLayoutEffectOnFiber (chunk-B27YY5WJ.js?v=2667d1d7:17024:23)
    at commitLayoutMountEffects_complete (chunk-B27YY5WJ.js?v=2667d1d7:18008:17)

But when you manually change the version of cmdk to 0.2.1, the problem goes away.

npm i cmdk@0.2.1

Codesandbox/StackBlitz link

https://github.com/wootra/cmdk-bug-test

Logs

Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
    at Function.from (<anonymous>)
    at A (cmdk.js?v=152e52e8:171:18)
    at U2 (cmdk.js?v=152e52e8:137:13)
    at cmdk.js?v=152e52e8:97:34
    at cmdk.js?v=152e52e8:365:31
    at Map.forEach (<anonymous>)
    at cmdk.js?v=152e52e8:365:15
    at commitHookEffectListMount (chunk-B27YY5WJ.js?v=593761cf:16936:34)
    at commitLayoutEffectOnFiber (chunk-B27YY5WJ.js?v=593761cf:17024:23)
    at commitLayoutMountEffects_complete (chunk-B27YY5WJ.js?v=593761cf:18008:17)

System Info

Mac, Chrome/Firefox

Before submitting

wootra commented 2 weeks ago

closing it for the duplication. solution is already found in here: https://github.com/shadcn-ui/ui/issues/2944#issuecomment-1985962119