shadcn-ui/ui

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

wootra opened this issue · 1 comments

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

  1. make Combobox following here
  2. import it.
    main.tsx
import ReactDOM from 'react-dom/client';
import { ComboboxDemo } from '@/Combobox';
import './globals.css';

ReactDOM.createRoot(document.getElementById('root')!).render(<ComboboxDemo />);

Now you can see a combo box in the page, but when you click it, it crash the app with the error message:

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

  • I've made research efforts and searched the documentation
  • I've searched for existing issues

closing it for the duplication. solution is already found in here: #2944 (comment)