[Bug]: [@vue/compiler-sfc] Failed to resolve extends base type. While adding button component

[hubcio2115]

Environment

Developement/Production OS: MacOS 14.1.2
Node version: 20.9.0
Package manager: bun@1.0.15
Radix Vue version: latest
Shadcn Vue version: 0.1.0
Vue version: 3.3.10
Nuxt version: 3.8.2
Nuxt mode: universal
Nuxt target: server
CSS framework: tailwindcss@3.3.5
Client OS: MacOS 14.1.2
Browser: Firefox 120.0.1

Link to minimal reproduction

https://github.com/hubcio2115/nuxt-chadcn

Steps to reproduce

• add components/ui folder in src - because you cannot commit empty folders with git
• run bun i
• run bunx schadcn-vue-@latest add button

Describe the bug

I started a brand new project with nuxti, as per shadcn-vue instructions for js setup in the installation docs. Went through entire process and when I try to add button with the cli I get:

$ bunx shadcn-vue@latest add button
⠋ Installing components...[@vue/compiler-sfc] Failed to resolve extends base type.
If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @v
ue-ignore */ before it, for example:

interface Props extends /* @vue-ignore */ Base {}

Note: both in 3.2 or with the ignore, the properties in the base type are treated as fallthrough attr
s at runtime.

anonymous.vue
4  |  import { cn } from '~/lib/utils'
5  |  
6  |  interface Props extends PrimitiveProps {
   |                          ^^^^^^^^^^^^^^
7  |    variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']
8  |    size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']

button folder gets added in src/components/ui but it doesn't get populated with the button component. It is specifically button component. When I tried to add input, badge and alert it worked just fine. When I tried to install chadcn-vue in a typescript nuxt project installing button works fine.

Expected behavior

chadcn-vue Button component gets added to src/components/ui with it's index.js file.

Conext & Screenshots (if applicable)

No response

[hubcio2115]

After some digging I figured that the issue might be with this utility:

export async function transformByDetype(content: string, filename: string) {
  return await transform(content, filename, {
    removeTsComments: true,
  })
}

It can't convert extended interface. Maybe changing this to a type syntax'd solve the issue? I can't easily test it since the cli is making a fetch request to the components registry.

[hubcio2115]

I managed to get the component finally by moving PrimitiveProps properties to Props. With that I was able to build the Button component.

[zernonia]

Thanks for the context @hubcio2115 ! I think you are right that the transformation may be causing that issue. @Dunqing can you help look into this? 😁 Believe it might be related to detypes

[Dunqing]

Thanks for the context @hubcio2115 ! I think you are right that the transformation may be causing that issue. @Dunqing can you help look into this? 😁 Believe it might be related to detypes

I'll look into that

[bjorne84]

I had the exact same problem/errormsg, when I installed typescript in the project it worked

[hubcio2115]

...when I installed typescript in the project it worked

I also have typescript installed because it's a needed dependency in a project for Volar to work. At least for me it's needed with the setup I have.

[Dunqing]

Sorry, it took so long to respond.

I cannot reproduce in your reproduction. Judging from the error message, your @vue/compiler-sfc package version is below v3.2. But the detypes package requires @vue/* >= 3.2. So you can upgrade these packages and try again

[sadeghbarati]

Yes I can confirm it is working on Windows and also unix OS (StackBlitz)

https://stackblitz.com/edit/github-w623yc ignore this warn for now (WARN Two component files resolving to the same name UiButton)

---

However on Windows on first try I had error but after first try it work as excepted

1. pnpm dlx shadcn-vue@latest add button ❌
2. pnpm dlx shadcn-vue@latest add and select the components ✅
3. pnpm dlx shadcn-vue@latest add button ✅

---

Please try on latest Nuxt and Vue versions, don't stay on older versions when it's not like Vue2->Vue3 migration

[Jahan-Shah]

I'm also getting this error while adding button. I just setup an vue project using js and I cannot add button to my project. Here is the link to the codespace https://codespaces.new/Jahan-Shah/test

Is there any solution?

Note: The issue resolved after I installed radix-vue.

[sadeghbarati]

Since button is using PrimitiveProps types

radix-vue must be present in dependencies

[sadeghbarati]

Main shadcn-ui CLI also install @radix-ui/react-slot when adding Button component

[sadeghbarati]

Ow man You guys are right 👍

Adding radix-vue dep with shadcn init before adding any component with shadcn-vue add should resolve this issue

[Jahan-Shah]

@sadeghbarati I'm glad that helped in resolving the issue.

[jd-solanki]

I'm still getting this error when I follow Nuxt guide: https://www.shadcn-vue.com/docs/installation/nuxt.html

I also tried installing radix-vue first and later executing npx shadcn-vue@latest init but still gettting the error with button component.

[Saveliy113]

I'm still getting this error when I follow Nuxt guide: https://www.shadcn-vue.com/docs/installation/nuxt.html

I also tried installing radix-vue first and later executing npx shadcn-vue@latest init but still gettting the error with button component.

Same error. How to resolve it?

[ayaanqui]

I've got the same issue on a new Nuxt project. Tried adding radix-vue as a dev dependecy, but that didn't resolve the issue.

[sadeghbarati]

@ayaanqui Hi

Are you using shadcn-vue without TypeScript?

[ayaanqui]

@ayaanqui Hi

Are you using shadcn-vue without TypeScript?

@sadeghbarati I'm using it with TS. Also, I was able to fix the issue on my end by adding an import to the button component. Looks like the auto import feature offered in Nuxt didn't work.

[falcon9r]

I have the same problem with typescript

please solve that

[sadeghbarati]

Hi, Can you guys share what way you using shadcn-vue in Nuxt?

• shadcn-nuxt

Or

• manual shadcn module

[serman]

Hello I have created a new project in NUXT3, I followed the instructions and I am still getting this error when using the button component. I selected the typescript option. Is there any temporary fix?

[serman]

My fault sorry, typescript wasn't installed as a dependency:

npm install -D typescript

Now everything works

[sadeghbarati]

So we tested with TypeScript and also tested out without TypeScript here 👇

https://stackblitz.com/edit/vitejs-vite-1tta2g

It's working fine

[Matheun]

still having this issue when using the default nuxt layer setup: ENOENT: no such file or directory, stat 'D:/Code/Nuxt Component Layer - Test/nuxt-layer/.nuxt/tsconfig.json'

[usmanibrahim74]

Hi, I'm trying to use it in a Laravel project without typescript. It is not working for me also. it looks like the init command didn't installed the basic dependencies. I attached package.json after installing shadcn. should I manually install required dependencies?

[sadeghbarati]

@usmanibrahim74

You need to remove lockfile and install again, then run shadcn-vue init again

Or just install missing dependencies manually

Idk why it's happening, but I know sometimes lockfiles are the problems

[x1q2q]

@usmanibrahim74

You need to remove lockfile and install again, then run shadcn-vue init again

Or just install missing dependencies manually

Idk why it's happening, but I know sometimes lockfiles are the problems

thanks, dude. it works!

[sugoidesune]

Got that error too now. Fresh install of shadcn using the recommended npx nuxi@latest module add shadcn-nuxt I tried updating @vue/compiler-sfc and installing updating 'radix-vue' manually but that didnt change anything.

I now added the by the compiler proposed interface Props extends /* @vue-ignore */ PrimitiveProps { and it works but yeah doesn't feel like a correct solution.

"nuxt": "^3.11.2",
"shadcn-nuxt": "^0.10.4"
 "radix-vue": "^1.8.0",

[BlueBazze]

Been slamming my head against the wall for some days now. Same problem as the original issue, same setup as the previous comment with Nuxt 3.11.2 Using the managed shadcn-nuxt module, and all the default values for the configs. The error is not specifically for the button component im my case. The same error is thrown for any import of radix component props that uses the primitive props from what ive noticed.

[mwanikigeorge]

Make sure you install typeScript as a dev dependency

[pazfelipe]

I had the exact same problem/errormsg, when I installed typescript in the project it worked

Thank you ... adding typescript was enough to make it work.

[joeimer]

I had the same problem using nuxt + pnpm. I had to install radix-vue and tailwind-merge manually.