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

hubcio2115 · 2023-12-11T19:33:41Z

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

The text was updated successfully, but these errors were encountered:

hubcio2115 · 2023-12-12T12:29:04Z

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 · 2023-12-12T13:07:31Z

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

zernonia · 2023-12-13T15:36:37Z

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 · 2023-12-14T10:49:34Z

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 · 2023-12-15T16:45:47Z

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

hubcio2115 · 2023-12-17T14:10:00Z

...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 · 2023-12-20T02:11:41Z

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 · 2023-12-20T06:17:53Z

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

pnpm dlx shadcn-vue@latest add button ❌
pnpm dlx shadcn-vue@latest add and select the components ✅
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 · 2023-12-20T12:35:23Z

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 · 2023-12-20T13:54:06Z

Since button is using PrimitiveProps types

radix-vue must be present in dependencies

sadeghbarati · 2023-12-20T13:58:31Z

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

sadeghbarati · 2023-12-20T14:15:30Z

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 · 2023-12-20T15:26:15Z

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

jd-solanki · 2024-01-16T12:50:44Z

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 · 2024-01-20T04:19:23Z

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 · 2024-01-22T16:05:05Z

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 · 2024-01-22T16:15:10Z

@ayaanqui Hi

Are you using shadcn-vue without TypeScript?

ayaanqui · 2024-01-22T16:25:20Z

@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 · 2024-01-24T02:30:31Z

I have the same problem with typescript

please solve that

sadeghbarati · 2024-01-24T02:46:34Z

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

shadcn-nuxt

Or

manual shadcn module

serman · 2024-01-26T11:05:06Z

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 · 2024-01-26T13:05:12Z

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

npm install -D typescript

Now everything works

sadeghbarati · 2024-02-20T10:04:31Z

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

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

It's working fine

Matheun · 2024-03-11T09:48:21Z

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 · 2024-03-15T04:29:04Z

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 · 2024-03-15T08:06:04Z

@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 · 2024-03-28T05:45:59Z

@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 · 2024-05-17T04:31:59Z

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 · 2024-05-18T20:40:09Z

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 · 2024-07-04T09:14:07Z

Make sure you install typeScript as a dev dependency

hubcio2115 added the bug Something isn't working label Dec 11, 2023

sadeghbarati mentioned this issue Dec 20, 2023

fix: avoid failing resolve types by adding radix-vue to project deps in shadcn-vue init before the add command #216

Merged

zernonia closed this as completed in #216 Dec 21, 2023

sadeghbarati reopened this Jan 24, 2024

sadeghbarati closed this as completed Feb 20, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

hubcio2115 commented Dec 11, 2023 •

edited

Loading

hubcio2115 commented Dec 12, 2023 •

edited

Loading

hubcio2115 commented Dec 12, 2023

zernonia commented Dec 13, 2023

Dunqing commented Dec 14, 2023

bjorne84 commented Dec 15, 2023

hubcio2115 commented Dec 17, 2023

Dunqing commented Dec 20, 2023

sadeghbarati commented Dec 20, 2023 •

edited

Loading

Jahan-Shah commented Dec 20, 2023 •

edited

Loading

sadeghbarati commented Dec 20, 2023 •

edited

Loading

sadeghbarati commented Dec 20, 2023 •

edited

Loading

sadeghbarati commented Dec 20, 2023

Jahan-Shah commented Dec 20, 2023

jd-solanki commented Jan 16, 2024

Saveliy113 commented Jan 20, 2024

ayaanqui commented Jan 22, 2024

sadeghbarati commented Jan 22, 2024

ayaanqui commented Jan 22, 2024

falcon9r commented Jan 24, 2024

sadeghbarati commented Jan 24, 2024

serman commented Jan 26, 2024

serman commented Jan 26, 2024

sadeghbarati commented Feb 20, 2024

Matheun commented Mar 11, 2024

usmanibrahim74 commented Mar 15, 2024 •

edited

Loading

sadeghbarati commented Mar 15, 2024

x1q2q commented Mar 28, 2024

sugoidesune commented May 17, 2024 •

edited

Loading

BlueBazze commented May 18, 2024 •

edited

Loading

mwanikigeorge commented Jul 4, 2024

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

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

Comments

hubcio2115 commented Dec 11, 2023 • edited Loading

Environment

Link to minimal reproduction

Steps to reproduce

Describe the bug

Expected behavior

Conext & Screenshots (if applicable)

hubcio2115 commented Dec 12, 2023 • edited Loading

hubcio2115 commented Dec 12, 2023

zernonia commented Dec 13, 2023

Dunqing commented Dec 14, 2023

bjorne84 commented Dec 15, 2023

hubcio2115 commented Dec 17, 2023

Dunqing commented Dec 20, 2023

sadeghbarati commented Dec 20, 2023 • edited Loading

Jahan-Shah commented Dec 20, 2023 • edited Loading

sadeghbarati commented Dec 20, 2023 • edited Loading

sadeghbarati commented Dec 20, 2023 • edited Loading

sadeghbarati commented Dec 20, 2023

Jahan-Shah commented Dec 20, 2023

jd-solanki commented Jan 16, 2024

Saveliy113 commented Jan 20, 2024

ayaanqui commented Jan 22, 2024

sadeghbarati commented Jan 22, 2024

ayaanqui commented Jan 22, 2024

falcon9r commented Jan 24, 2024

sadeghbarati commented Jan 24, 2024

serman commented Jan 26, 2024

serman commented Jan 26, 2024

sadeghbarati commented Feb 20, 2024

Matheun commented Mar 11, 2024

usmanibrahim74 commented Mar 15, 2024 • edited Loading

sadeghbarati commented Mar 15, 2024

x1q2q commented Mar 28, 2024

sugoidesune commented May 17, 2024 • edited Loading

BlueBazze commented May 18, 2024 • edited Loading

mwanikigeorge commented Jul 4, 2024

hubcio2115 commented Dec 11, 2023 •

edited

Loading

hubcio2115 commented Dec 12, 2023 •

edited

Loading

sadeghbarati commented Dec 20, 2023 •

edited

Loading

Jahan-Shah commented Dec 20, 2023 •

edited

Loading

sadeghbarati commented Dec 20, 2023 •

edited

Loading

sadeghbarati commented Dec 20, 2023 •

edited

Loading

usmanibrahim74 commented Mar 15, 2024 •

edited

Loading

sugoidesune commented May 17, 2024 •

edited

Loading

BlueBazze commented May 18, 2024 •

edited

Loading