N
Nuxt•7d ago
Sun

Can't build since migrate to Nuxt UI 3

I got this error when I try to build: 
 ERROR  Nuxt Build Error: [vite:vue] [@vue/compiler-sfc] Failed to resolve extends base type.                                                                                                            nuxi 9:54:55 AM
If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-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 attrs at runtime.

/home/user/projects/pro/app/node_modules/@nuxt/ui/dist/runtime/components/Button.vue
70 |  const slots = defineSlots<ButtonSlots>()
71 |  
72 |  const linkProps = useForwardProps(pickLinkProps(props))
   |                                              ^^^^^^^^^^^
73 |  
   |  ^
74 |  const { orientation, size: buttonSize } = useButtonGroup<ButtonProps>(props)
   |  ^^^^^^^^^^^^^^^^^^^^
file: /home/user/projects/pro/app/node_modules/@nuxt/ui/dist/runtime/components/Button.vue
 ERROR  Nuxt Build Error: [vite:vue] [@vue/compiler-sfc] Failed to resolve extends base type.                                                                                                            nuxi 9:54:55 AM
If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-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 attrs at runtime.

/home/user/projects/pro/app/node_modules/@nuxt/ui/dist/runtime/components/Button.vue
70 |  const slots = defineSlots<ButtonSlots>()
71 |  
72 |  const linkProps = useForwardProps(pickLinkProps(props))
   |                                              ^^^^^^^^^^^
73 |  
   |  ^
74 |  const { orientation, size: buttonSize } = useButtonGroup<ButtonProps>(props)
   |  ^^^^^^^^^^^^^^^^^^^^
file: /home/user/projects/pro/app/node_modules/@nuxt/ui/dist/runtime/components/Button.vue
If I remove the <UAlert title="Heads up!" /> from the code below, the app builds correctly: 
<template>
  <div>
    <UAlert title="Heads up!" />
  </div>
</template>
<template>
  <div>
    <UAlert title="Heads up!" />
  </div>
</template>
This is my package.json: 
{
  "name": "@app/nuxt-layer",
  "type": "module",
  "version": "0.0.1",
  "main": "./nuxt.config.ts",
  "scripts": {
    "build": "nuxt build",
    "clean": "rm -rf node_modules .nuxt .turbo  coverage .output dist .playground",
    "generate": "nuxt generate",
    "lint": "eslint .",
    "lint:fix": "bun run lint --fix",
    "prepare": "nuxt prepare",
    "preview": "nuxt preview",
    "todo:dev": "nuxi dev",
    "todo:typecheck": "nuxi typeckeck"
  },
  "devDependencies": {
    "@iconify-json/lucide": "^1.2.38",
    "@nuxt/eslint": "^1.3.0",
    "@nuxt/ui": "^3.0.2",
    "@sidebase/nuxt-auth": "0.9.4",
    "@vueuse/core": "^13.1.0",
    "@vueuse/nuxt": "^13.1.0",
    "nuxt": "^3.16.2",
  }
}
{
  "name": "@app/nuxt-layer",
  "type": "module",
  "version": "0.0.1",
  "main": "./nuxt.config.ts",
  "scripts": {
    "build": "nuxt build",
    "clean": "rm -rf node_modules .nuxt .turbo  coverage .output dist .playground",
    "generate": "nuxt generate",
    "lint": "eslint .",
    "lint:fix": "bun run lint --fix",
    "prepare": "nuxt prepare",
    "preview": "nuxt preview",
    "todo:dev": "nuxi dev",
    "todo:typecheck": "nuxi typeckeck"
  },
  "devDependencies": {
    "@iconify-json/lucide": "^1.2.38",
    "@nuxt/eslint": "^1.3.0",
    "@nuxt/ui": "^3.0.2",
    "@sidebase/nuxt-auth": "0.9.4",
    "@vueuse/core": "^13.1.0",
    "@vueuse/nuxt": "^13.1.0",
    "nuxt": "^3.16.2",
  }
}
2 Replies
kapa.ai
kapa.ai•7d ago
Hi @Sun. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue you're experiencing is related to TypeScript configuration when migrating to Nuxt UI v3. This is a common problem during the migration process from Nuxt UI v2 to v3, as the library has been completely rebuilt with significant changes. The Problem The error occurs because the Vue compiler is having trouble resolving TypeScript types in the Nuxt UI components. Specifically, it's failing to resolve the extends base type in the Button component. Solution Based on the knowledge sources, there are a few things you need to check: 1. Run nuxt prepare in your layer: As mentioned in a GitHub issue, every layer with a tsconfig.json should have nuxt prepare run there so types are correct as far as Vue is concerned. This is a requirement of @vitejs/plugin-vue because the Vue compiler needs type information. GitHub Issue 2. Check your tsconfig.json: Make sure your tsconfig.json is properly configured. If you have a layer with a tsconfig that extends ./.nuxt/tsconfig.json, make sure that file exists by running nuxt prepare. 3. Update your CSS imports: According to the migration guide, you need to create a main.css file and import it in your nuxt.config.ts: 
   /* app/assets/css/main.css */
   @import "tailwindcss";
   @import "@nuxt/ui";
   
   /* app/assets/css/main.css */
   @import "tailwindcss";
   @import "@nuxt/ui";
   
   // nuxt.config.ts
   export default defineNuxtConfig({
     css: ['~/assets/css/main.css']
   })
   
   // nuxt.config.ts
   export default defineNuxtConfig({
     css: ['~/assets/css/main.css']
   })
Migration Guide 4. Wrap your app with the App component: Make sure you've wrapped your app with the UApp component: 
   <template>
     <UApp>
       <NuxtPage />
     </UApp>
   </template>
   
   <template>
     <UApp>
       <NuxtPage />
     </UApp>
   </template>
Migration Guide 5. Check your UI configuration: If you have custom UI configurations in app.config.ts, you might need to update them according to the new structure. In v3, the configuration structure has changed: 
   // app.config.ts (v3)
   export default defineAppConfig({
     ui: {
       colors: {
         primary: 'green',
         neutral: 'slate'
       }
     },
     uiPro: {
       // Pro components config here
     },
   })
   
   // app.config.ts (v3)
   export default defineAppConfig({
     ui: {
       colors: {
         primary: 'green',
         neutral: 'slate'
       }
     },
     uiPro: {
       // Pro components config here
     },
   })
UI Pro Docs Migration The migration from Nuxt UI v2 to v3 requires significant effort as mentioned in the documentation: "We want to be transparent: migrating from Nuxt UI v2 to v3 will require significant effort." Make sure to follow the complete migration guide for a smooth transition. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•7d ago
<@211565256890122240> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?