[Bug]: Many Components error "Cannot read properties of undefined (reading 'sys')" in Nuxt 3 application

[LostMyUnicorn]

Environment

Developement/Production OS: Windows 10 19043.1110
Node version: 20.3.0
Package manager: yarn@1.22.19
Radix Vue version: 0.2.3
Shadcn Vue version: npx shadcn-vue@latest
Vue version: 3.3.4
Nuxt version: 3.7.3
Nuxt mode: universal
Nuxt target: server
CSS framework: "@nuxtjs/tailwindcss": "^6.8.0" (tailwind 3.3.3)
Client OS: Windows 11 22621.2283

Link to minimal reproduction

https://stackblitz.com/edit/nuxt-starter-u1vgd1?file=app.vue

Steps to reproduce

Install fresh Nuxt application npx nuxi@latest init my-app

Install tailwind npm install -D @nuxtjs/tailwindcss

Run the CLI with default Nuxt settings npx shadcn-vue@latest init

✔ Would you like to use TypeScript (recommended)? … yes ✔ Which framework are you using? › Nuxt ✔ Which style would you like to use? › Default ✔ Which color would you like to use as base color? › Zinc ✔ Where is your Tailwind CSS file? … assets/css/tailwind.css ✔ Would you like to use CSS variables for colors? … yes ✔ Where is your tailwind.config.js located? … tailwind.config.js ✔ Configure the import alias for components: … @/components ✔ Configure the import alias for utils: … @/lib/utils ✔ Write configuration to components.json. Proceed? … yes

Install a component npx shadcn-vue@latest add dialog

use sample code from page (inside app.vue)

<script setup lang="ts">
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
</script>
<template>
  <Dialog>
    <DialogTrigger>
      Edit Profile
    </DialogTrigger>
    <DialogContent>
      <DialogHeader>
        <DialogTitle>Edit profile</DialogTitle>
        <DialogDescription>
          Make changes to your profile here. Click save when youre done.
        </DialogDescription>
      </DialogHeader>
      <DialogFooter>
        Save changes
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>

Error appears Cannot read properties of undefined (reading 'sys')

Describe the bug

Bug occurs on fresh install of Nuxt 3 in a Windows environment. It effects multiple other components. including at least Dialog, Calendar, Hover Card, Progress, Sheet and Navigation Menu. Some do work, such as button and alert

During some attempts at debugging, it may be related to defineProps found in most components which uses Typescript interface.

I discovered this project via this video: https://www.youtube.com/watch?v=vs-vfc9nt0k Which user @onelvisdelarosa4116 commented regarding the same issue. The video creator commented and confirmed they also are experiencing this bug

Expected behavior

Expect the component to load on page with no errors on page or terminals

Conext & Screenshots (if applicable)

On page error

IDE terminal / server

Browser terminal

[BayBreezy]

You can try these steps outlined in this issue: https://github.com/nuxt/nuxt/issues/20936 They didn't work for me as I got the error: EISDIR: illegal operation on a directory, read

[zernonia]

@LostMyUnicorn could you try that suggestion from @BayBreezy ?

[orenmizr]

I have this too :( is there a nuxt starter we can all look into ? i ended doing all the default settings and nothing worked. crashed my app.

[zernonia]

@orenmizr We've confirmed that this fix works! 😁

Could you give it a try?

[BayBreezy]

I can confirm that the instructions on the shadcn-vue website here: https://www.shadcn-vue.com/docs/installation/nuxt.html works.

I think it was not working for me because I did not do this part

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],
  components: [
    {
      path: '~/components/ui',
      // this is required else Nuxt will autoImport `.ts` file
      extensions: ['.vue'],
      // prefix for your components, eg: UiButton
      prefix: 'Ui'
    },
  ],
})

And also, I was using the radix-vue/nuxt module instead of just importing the stuff from the package directly. I create a new project just now and followed the instructions there and it worked.

[LostMyUnicorn]

@zernonia Can confirm manually adding Typescript as a dependency has resolved the issue. Closing the issue as I believe updated docs provides resolution. Thank you for support.

I should mention for the interest of anyone else that I still received a different error after adding a component (like sheet), but a simple restart of the server fixed that.

[orenmizr]

@zernonia that fix did remove the typescript error. but the render output was not good. render without classes. i have nuxt setup, installed the nuxt tailwind. imported shadcn + utils (first via cli which added extra quotes on imports, than manually) the button had no colors. the select had no width or behaviour or look. added components json and all the configs and nothing got fixed i remove it from the project for now.

installing manually i had no idea which dependencies relate to which component... there was radix icons needed to be installed... some components rely on others and when it crashed i realized it.

lib/utils + component json + tailwind config + nuxt config... all looked like the docs intended... is there a nuxt repo i can examine and maybe figure out the issue ?

i did a test for tailwind code - it rendered correct. it is just the shadn components that could not render well. to be fair i do use pugjs as my template language.... perhaps there is an issue extracting the classes from it