[Bug]: Can't install `Drawer`, `Dialog` and `Toast` in WSL about shadcn-vue

[adiramardiani]

Hmm, is bug just show on my environment only ? hahaha
What your node / pnpm version ?
Btw this is my node, pnpm, and npm version, maybe because my node version

I try to create vite project, but the result is same

I think this not related laravel or vite, but because some node or etc version
So if you have any other task issue, you can igonre this issue :)

Thank's for your help
Big respect

[adiramardiani]

@justinkekeocha reported the same issue on WSL, so I change to title

Btw @sadeghbarati
I found new issue on wsl using typescript false, I add dialog component and give as HTMLElement on DialogScrollContent file which is is typescript code, maybe for me is easy fix to edit on code, but just info
So I change the title to add Dialog to

[sadeghbarati]

@adiramardiani Can you share repro with Laravel?

I'm using a normal Vite project and it's ok

Toast.vue

<script setup>
import { computed } from "vue";
import { ToastRoot, useForwardPropsEmits } from "radix-vue";
import { toastVariants } from ".";
import { cn } from "@/lib/utils";

const props = defineProps({
  class: { type: null, required: false },
  variant: { type: null, required: false },
  onOpenChange: { type: Function, required: false, skipCheck: true },
  defaultOpen: { type: Boolean, required: false },
  forceMount: { type: Boolean, required: false },
  type: { type: String, required: false },
  open: { type: Boolean, required: false },
  duration: { type: Number, required: false },
  asChild: { type: Boolean, required: false },
  as: { type: null, required: false },
});

const emits = defineEmits([
  "escapeKeyDown",
  "pause",
  "resume",
  "swipeStart",
  "swipeMove",
  "swipeCancel",
  "swipeEnd",
  "update:open",
]);

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props;

  return delegated;
});

const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>

<template>
  <ToastRoot
    v-bind="forwarded"
    :class="cn(toastVariants({ variant }), props.class)"
    @update:open="onOpenChange"
  >
    <slot />
  </ToastRoot>
</template>

Drawer should be fixed after this commit cd3d244

Drawer.vue

<script setup>
import { DrawerRoot } from "vaul-vue";
import { useForwardPropsEmits } from "radix-vue";

const props = defineProps({
  activeSnapPoint: { type: [Number, String, null], required: false },
  closeThreshold: { type: Number, required: false },
  shouldScaleBackground: { type: Boolean, required: false, default: true },
  scrollLockTimeout: { type: Number, required: false },
  fixed: { type: Boolean, required: false },
  dismissible: { type: Boolean, required: false },
  modal: { type: Boolean, required: false },
  open: { type: Boolean, required: false },
  defaultOpen: { type: Boolean, required: false },
  nested: { type: Boolean, required: false },
  snapPoints: { type: Array, required: false },
  fadeFromIndex: { type: null, required: false },
});

const emits = defineEmits([
  "drag",
  "release",
  "close",
  "update:open",
  "update:activeSnapPoint",
]);

const forwarded = useForwardPropsEmits(props, emits);
</script>

<template>
  <DrawerRoot v-bind="forwarded">
    <slot />
  </DrawerRoot>
</template>

[sadeghbarati]

closing for now will reopen after repro 🙏

[adiramardiani]

Hi @sadeghbarati

Here my github repo https://github.com/adiramardiani/laravel-shadcn-vue

Here my package.json generated by breeze and shadcn ini

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build && vite build --ssr"
    },
    "devDependencies": {
        "@inertiajs/vue3": "^1.0.15",
        "@tailwindcss/forms": "^0.5.7",
        "@vitejs/plugin-vue": "^5.0.4",
        "@vue/server-renderer": "^3.4.21",
        "autoprefixer": "^10.4.19",
        "axios": "^1.6.8",
        "laravel-vite-plugin": "^1.0.2",
        "postcss": "^8.4.38",
        "tailwindcss": "^3.4.1",
        "vite": "^5.2.4",
        "vue": "^3.4.21"
    },
    "dependencies": {
        "@radix-icons/vue": "^1.0.0",
        "class-variance-authority": "^0.7.0",
        "clsx": "^2.1.0",
        "radix-vue": "^1.5.3",
        "tailwind-merge": "^2.2.2",
        "tailwindcss-animate": "^1.0.7"
    }
}

Btw, the Drawer still not fixed on my test

Thanks

[sadeghbarati]

Let me try with breeze cause I don't install any requirements for Laravel in my local

[sadeghbarati]

@adiramardiani

[sadeghbarati]

My node version is 20.11.1 and pnpm is 8.15.5, always on LTS and latest version for other tools

Can you try with pnpm, please remove package-lock and node_modules, and install everything fresh

[adiramardiani]

Sure, I downgrade node and pnpm like your config, remove lock and node_modules, but still the same :)

node v20.11.1
npm 10.2.4
pnpm 8.15.5

Btw this is wsl2 on windows, I dont know this is the clue or not
Maybe we can ignore this issue, and can wait n see, hopefully will fixed or can found the cause later

[sadeghbarati]

I will test on WSL tomorrow, also I will send the minimal breeze project here in zip format

[justinkekeocha]

I am having this same issue on WSL2

[sadeghbarati]

@Dunqing Hi can you check these problems it is related to detypes

• CLI is not working well in WSL/WSL2 (test with drawer, and toast)

• ts types inside <template> is preserved in JS projects

---

Error is in these lines
https://github.com/radix-vue/shadcn-vue/blob/dev/packages/cli/src/commands/add.ts#L194C9-L215C10

[Reached]

I am seeing the same issue on MacOS (latest version), running Node v20.11.0 and NPM v10.2.4. Basically unable to install any of the components

[justinkekeocha]

Coincidentally I am using the same NPM version with node v20.11.1