Closed otabekoff closed 1 month ago
https://stackblitz.com/edit/vitejs-vite-xqfe5c?file=Reproduction.vue
When I add Accordion component using npx shadcn-vue@latest add accordion to my project, it downloaded the component and when I use it, it gave the error of:
npx shadcn-vue@latest add accordion
[plugin:vite:vue] Error parsing JavaScript expression: Unexpected token, expected "," (5:1) /home/otabek/Projects/RealProjects/coursio/src/components/ui/accordion/AccordionTrigger.vue:24:15 23 | v-bind="delegatedProps" 24 | :class=" 25 | cn( | ^ 26 | 'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180', 27 | props.class
When I open the /path/to/myproject/src/components/ui/accordion/AccordionTrigger.vue, I noticed a typo in class name function of cn. That code was:
/path/to/myproject/src/components/ui/accordion/AccordionTrigger.vue
cn
<script setup> import { computed } from 'vue' import { AccordionHeader, AccordionTrigger } from 'radix-vue' import { ChevronDown } from 'lucide-vue-next' import { cn } from '@/lib/utils' const props = defineProps({ asChild: { type: Boolean, required: false }, as: { type: null, required: false }, class: { type: null, required: false } }) const delegatedProps = computed(() => { const { class: _, ...delegated } = props return delegated }) </script> <template> <AccordionHeader class="flex"> <AccordionTrigger v-bind="delegatedProps" :class=" cn( 'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180', props.class )]" > <slot /> <slot name="icon"> <ChevronDown class="h-4 w-4 shrink-0 transition-transform duration-200" /> </slot> </AccordionTrigger> </AccordionHeader> </template>
And it is specifically this part:
<AccordionTrigger v-bind="delegatedProps" :class=" cn( 'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180', props.class )]" >
And I added the missing [ in in :class before cn() function and it is resolved. Pls, fix this tiny bug.
[
:class
cn()
System: OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat) CPU: (8) x64 Intel(R) Core(TM) i7-8665U CPU @ 1.90GHz Memory: 9.72 GB / 15.27 GB Container: Yes Shell: 5.2.21 - /bin/bash Binaries: Node: 22.9.0 - ~/.nvm/versions/node/v22.9.0/bin/node npm: 10.8.3 - ~/.nvm/versions/node/v22.9.0/bin/npm npmPackages: @vueuse/core: ^11.1.0 => 11.1.0 radix-vue: ^1.9.6 => 1.9.6 vue: ^3.4.29 => 3.5.11
Fixed in v0.11.0
Reproduction
https://stackblitz.com/edit/vitejs-vite-xqfe5c?file=Reproduction.vue
Describe the bug
When I add Accordion component using
npx shadcn-vue@latest add accordion
to my project, it downloaded the component and when I use it, it gave the error of:When I open the
/path/to/myproject/src/components/ui/accordion/AccordionTrigger.vue
, I noticed a typo in class name function ofcn
. That code was:And it is specifically this part:
And I added the missing
[
in in:class
beforecn()
function and it is resolved. Pls, fix this tiny bug.System Info
Contributes