[Bug]: Sidebar component is not insatllable.

[pushpak1300]

Reproduction

Laravel , Vite

Describe the bug

When you try to download sidebar package on fresh project.
npx shadcn-vue@latest add sidebar The following error occurs.

⠸ Installing sidebar...
[12:41:04 PM]  ERROR  /Users/pushpakchhajed/Projects/larasonic/resources/js/Components/shadcn/ui/sidebar/SidebarGroupAction.vue.ts: Unexpected token, expected "," (1:116)

> 1 | [Primitive];['---detypes-delimiter---'];[as];['---detypes-delimiter---'];[asChild];['---detypes-delimiter---'];[the button on mobile.
    |                                                                                                                     ^
  2 |       'after:absolute after:-inset-2 after:md:hidden',
  3 |       'group-data-[collapsible=icon]:hidden',
  4 |       props.class,

Even though TS is disable in components.json the files downloaded was Typescript files.

System Info

System:
    OS: macOS 14.5
    CPU: (8) arm64 Apple M3
    Memory: 174.55 MB / 16.00 GB
    Shell: 5.9 - /opt/homebrew/bin/zsh
  Binaries:
    Yarn: 1.22.22 - ~/.local/state/fnm_multishells/69546_1732990079800/bin/yarn
    npm: 10.8.1 - ~/Library/Application Support/Herd/config/nvm/versions/node/v20.14.0/bin/npm
    pnpm: 9.4.0 - /opt/homebrew/bin/pnpm
    bun: 1.1.37 - ~/.bun/bin/bun
  Browsers:
    Chrome: 131.0.6778.86
    Safari: 17.5
  npmPackages:
    @vueuse/core: ^12.0.0 => 12.0.0 
    radix-vue: ^1.9.10 => 1.9.10 
    vue: ^3.5.13 => 3.5.13

Contributes

• I am willing to submit a PR to fix this issue
• I am willing to submit a PR with failing tests

[AlijonMurodov]

Same issue in Vuejs Vite

[yazantenjaz]

any update for this issue also i have it in vue vite

[pushpak1300]

I was able to fix it by manually transforming typescript files to js myself.

[yazantenjaz]

@pushpak1300 which files
do you mean u transform each script from ts to js
or there is another files

please some help here

[AlijonMurodov]

any update for this issue also i have it in vue vite

enable typescript while installation (that throws bunch of errors)
npx shadcn-vue@latest init
or just use other tailwind component

[yazantenjaz]

@AlijonMurodov thank u for the ui it is amazing

[AlijonMurodov]

@AlijonMurodov thank u for the ui it is amazing

yup happy to help

[pushpak1300]

https://github.com/pushpak1300/Larasonic/tree/main/resources/js/Components/shadcn/ui/sidebar. Check this out and copy this folder @yazantenjaz

[zernonia]

Can you try again? I realised some error with the registry and pushed a fix 😁

[pushpak1300]

I tried it again. @zernonia

the issue still there.

[pandikapinata]

Yeah I also got same error, and got .ts instead of .js

\Components\ui\sidebar\SidebarGroupAction.vue.ts: Unexpected token, expected "," (1:116)

> 1 | [Primitive];['---detypes-delimiter---'];[as];['---detypes-delimiter---'];[asChild];['---detypes-delimiter---'];[the button on mobile.
    |                                                                                                                     ^
  2 |       'after:absolute after:-inset-2 after:md:hidden',
  3 |       'group-data-[collapsible=icon]:hidden',
  4 |       props.class,

[SerhiiKorniienko]

Same for me. I do have "typescript": false, in my components.json but sidebar kinda ignores it and gets downloaded in TS version. Not that I mind - but I have all other components as JS :)

Also, there is an import issue, as in installed components they are trying to import other components using registry dir structure. For example:

[plugin:vite:import-analysis] Failed to resolve import "@/lib/registry/default/ui/separator" from "resources/js/Components/ui/sidebar/SidebarSeparator.vue". Does the file exist?

[erwinyusrizal]

@SerhiiKorniienko you need to add the component first and change the import to "@/components/ui/separator" because @/lib/registry is not available in your project. I think since the add command doesn't know if the components already added in our project or not as its dependency, it uses @/lib/registry as default path?

I think it would be better if the add command npx shadcn-vue@latest add [component] could check whether its dependencies already added or not, if it is not added yet, it should download all the dependencies first

[SerhiiKorniienko]

@SerhiiKorniienko you need to add the component first and change the import to "@/components/ui/separator" because @/lib/registry is not available in your project. I think since the add command doesn't know if the components already added in our project or not as its dependency, it uses @/lib/registry as default path?

I think it would be better if the add command npx shadcn-vue@latest add [component] could check whether its dependencies already added or not, if it is not added yet, it should download all the dependencies first

@erwinyusrizal Sure, that will do. I don't remember such a thing with other components. But the bigger issue is that it's not converted into *.js component after installation.

[RobSpectre]

I get the same error.