[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
- 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
- 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"
}
- make Combobox following here
- 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)