shadcn-vue icon indicating copy to clipboard operation
shadcn-vue copied to clipboard

[Bug]: adding sidebar component in javascript mode returns error

Open gespinha opened this issue 1 month ago • 8 comments

Reproduction

https://stackblitz.com/edit/vitejs-vite-rzkjultz?file=components.json

Describe the bug

With the following components.json configuration:

{
  "$schema": "https://shadcn-vue.com/schema.json",
  "style": "new-york",
  "typescript": false,
  "tailwind": {
    "config": "",
    "css": "src/style.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "iconLibrary": "lucide",
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "composables": "@/composables"
  },
  "registries": {}
}

When running npx shadcn-vue@latest add sidebar, the following error is returned:

Something went wrong. Please check the error below for more details.
If the problem persists, please open an issue on GitHub.

[@vue/compiler-sfc] Failed to resolve import source ".".

ui/sidebar/Sidebar.vue
12 |  })
13 |  
14 |  const props = withDefaults(defineProps<SidebarProps>(), {
   |                                         ^^^^^^^^^^^^
15 |    side: "left",
16 |    variant: "sidebar",

This only happens when attempting to add the javascript version of the sidebar component with "typescript" set as false in components.json.

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 20.19.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @vueuse/core: ^13.9.0 => 13.9.0 
    reka-ui: ^2.5.1 => 2.5.1 
    vue: ^3.5.22 => 3.5.22

Contributes

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

gespinha avatar Oct 09 '25 00:10 gespinha

Same error here

rovilram avatar Oct 10 '25 10:10 rovilram

Same error :/

rodrigocoliveira avatar Oct 10 '25 16:10 rodrigocoliveira

@sadeghbarati any idea what this is about? I tried looking at the code and found nothing particularly strange. All components work well in this context except for this particular one.

gespinha avatar Oct 10 '25 17:10 gespinha

Moving

interface SidebarProps {
  side?: "left" | "right"
  variant?: "sidebar" | "floating" | "inset"
  collapsible?: "offcanvas" | "icon" | "none"
  class?: HTMLAttributes["class"]
}

Into the Sidebar.vue will solve the problem, but we should fix it unovue/detypes

Cause it can't resolve the types it threw that error

sadeghbarati avatar Oct 10 '25 20:10 sadeghbarati

Moving

interface SidebarProps { side?: "left" | "right" variant?: "sidebar" | "floating" | "inset" collapsible?: "offcanvas" | "icon" | "none" class?: HTMLAttributes["class"] } Into the Sidebar.vue will solve the problem, but we should fix it unovue/detypes

Cause it can't resolve the types it threw that error

Right, the problem is that npx shadcn-vue@latest add sidebar doesn't even get to download Sidebar.vue. It returns the error before that.

gespinha avatar Oct 11 '25 00:10 gespinha

A workaround until the bug is fixed is to copy the sidebar component directory in TS to your /components/ui folder.

andradedaniel avatar Oct 12 '25 14:10 andradedaniel

Any temp fix? I don't want to move to TypeScript.

hemansah avatar Oct 26 '25 13:10 hemansah

same error today ;9

authcompanion avatar Nov 11 '25 22:11 authcompanion

Can confirm, I also have this issue, it keeps trying to do typescript for the sidebar and fails.

manu144x avatar Nov 17 '25 05:11 manu144x

https://stackblitz.com/edit/vitejs-vite-gaekgmml

Check this Stackblitz guys its using TypeScript but it transform TS types to JS with mkdist and vue-sfc-transformer

sadeghbarati avatar Nov 17 '25 08:11 sadeghbarati