[Bug]: Can't install Drawer, Dialog and Toast in WSL

[adiramardiani]

Reproduction

npx shadcn-vue@latest add drawer / toast

Describe the bug

I'm ini using laravel framework configuration and set typescript as false
I don't know this will show just on laravel framework or other framework
Here my components.json

{
    "$schema": "https://shadcn-vue.com/schema.json",
    "style": "default",
    "typescript": false,
    "tailwind": {
        "config": "tailwind.config.mjs",
        "css": "resources/css/app.css",
        "baseColor": "slate",
        "cssVariables": true
    },
    "framework": "laravel",
    "aliases": {
        "components": "@/Components",
        "utils": "@/lib/utils"
    }
}

I try command :

• npx shadcn-vue@latest add drawer
• npx shadcn-vue@latest add toast

The component output still using typescript template instead of javascript

System Info

System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
    Memory: 1.78 GB / 7.64 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 21.7.1 - /usr/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 10.5.0 - /usr/bin/npm
    pnpm: 8.15.5 - /usr/bin/pnpm
    bun: 1.0.6 - /usr/bin/bun
  npmPackages:
    @vueuse/core: ^10.9.0 => 10.9.0 
    radix-vue: ^1.5.3 => 1.5.3 
    vue: ^3.4.21 => 3.4.21

Contributes

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

[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

[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

[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

[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]

@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

[tw1nk]

Same issue on Mac with bun 1.1.1

@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

Seems to be an issue with the detype. Maybe detype could be replaced with ts-to-jsdoc which does almost the same thing but keeps the type information in jsdoc comments.

probably not as reading a bit more it's just a personal pet project. But something similar would be awesome...

[cruzmediaorg]

I am having this same issue when trying to install the drawer on a Laravel/Vite project by npx shadcn-vue@latest add drawer.

Error:
Installing drawer...
ERROR ENOTDIR: not a directory, stat 'project_path/node_modules/vaul-vue/dist/index.d.ts/tsconfig.json'

[Lucklj521]

I also encountered the same problem. When I use dialog, export { default as DialogScrollContent } from "./DialogScrollContent.vue"; there is an error of 'Unexpected identifier 'as''. It's still a compatibility issue between ts and js

[graphenn]

WSL(linux) and Mac, so maybe this bug is related with something OS level difference between UNIX system and Windows.

[AlejandroAkbal]

I am having this same issue when trying to install the drawer on a Laravel/Vite project by npx shadcn-vue@latest add drawer.

Error: Installing drawer... ERROR ENOTDIR: not a directory, stat 'project_path/node_modules/vaul-vue/dist/index.d.ts/tsconfig.json'

Yup, same issue

Typescript disabled on Linux in a Laravel sail app

sail npx shadcn-vue@latest add drawer
⠴ Installing drawer...
[12:23:29 PM]  ERROR  ENOTDIR: not a directory, stat '/var/www/html/node_modules/vaul-vue/dist/index.d.ts/tsconfig.json'

[justinkekeocha]

I solved this issue by initializing a new nuxt project, installing shadcn-vue and moving files. Seems shadcn-vue is not built to be installed on already existing projects.

[AlejandroAkbal]

I solved this issue by initializing a new nuxt project, installing shadcn-vue and moving files. Seems shadcn-vue is not built to be installed on already existing projects.

I tried, but Nuxt projects dont work without typescript as seen on #291