shadcn-vue
shadcn-vue copied to clipboard
[Bug]: adding sidebar component in javascript mode returns error
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
Same error here
Same error :/
@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.
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
Moving
interface SidebarProps { side?: "left" | "right" variant?: "sidebar" | "floating" | "inset" collapsible?: "offcanvas" | "icon" | "none" class?: HTMLAttributes["class"] } Into the
Sidebar.vuewill solve the problem, but we should fix it unovue/detypesCause 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.
A workaround until the bug is fixed is to copy the sidebar component directory in TS to your /components/ui folder.
Any temp fix? I don't want to move to TypeScript.
same error today ;9
Can confirm, I also have this issue, it keeps trying to do typescript for the sidebar and fails.
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