radix-vue / shadcn-vue

Vue port of shadcn-ui
https://www.shadcn-vue.com/
MIT License
3.97k stars 232 forks source link

[Bug]: Broken files for `Select` component when installing over CLI #647

Open miclaus opened 1 month ago

miclaus commented 1 month ago

Describe the bug

When installing the Select component as described on the website like so:

npx shadcn-vue@latest add select

I was getting the following errors:

[plugin:vite:vue] Error parsing JavaScript expression: Unexpected token, expected "," (5:1)

/TestProject/resources/js/Components/ui/select/SelectItem.vue:33:13
32 |      v-bind="forwardedProps"
33 |      :class="
34 |  cn(
   |  ^
35 |    'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
36 |    props.class
[plugin:vite:vue] Error parsing JavaScript expression: Unexpected token, expected "," (6:1)

/TestProject/resources/js/Components/ui/select/SelectContent.vue:55:15
53 |      <SelectContent
54 |        v-bind="{ ...forwarded, ...$attrs }"
55 |        :class="cn(
   |                 ^
56 |    'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
57 |    position === 'popper' &&


I checked out the installed files SelectItem.vue and SelectContent.vue and noticed that there is an extra square bracket ] placed after the cn(...) function call in each file respectively for the :class attribute.


Code for SelectItem.vue when installing the Select component over the CLI ```vue ```
Code for SelectContent.vue when installing the Select component over the CLI ```vue ```


Weirdly enough the code in the repository / registry seems to be correct, hence there isn't any ] after the cn(...) function call for the :class attribute:

https://github.com/radix-vue/shadcn-vue/blob/d50ea38f4abccdad5db190ad2b1da26815e4c6aa/apps/www/src/lib/registry/default/ui/select/SelectItem.vue#L31

and

https://github.com/radix-vue/shadcn-vue/blob/d50ea38f4abccdad5db190ad2b1da26815e4c6aa/apps/www/src/lib/registry/default/ui/select/SelectContent.vue#L43

System Info

* macOS
* node 20.15.0
* npm 10.7.0
* Safari 17.5
* npmPackages:
  * @vueuse/core: ^10.11.0 => 10.11.0
  * radix-vue: ^1.8.5 => 1.8.5
  * vue: ^3.4.31 => 3.4.31

Contributes

sadeghbarati commented 1 month ago

JavaScript support for shadcn-vue components is not yet completed

Process of transforming Vue/TS to Vue/JS is handled by detypes inside CLI which has some edge cases

Related issue https://github.com/radix-vue/shadcn-vue/issues/378