N
Nuxt•2mo ago
UnRunDead

nuxt/ui: Pre-transform error: [@vue/compiler-sfc] Failed to resolve extends base type.

Since updating to the latest macOS Version (macOS 15.1 (24B83)) there are random errors across some of my projects which uses nuxt/ui. Does anyone have similar issues? 
 npm run dev

> dev
> nuxt dev

Nuxt 3.14.159 with Nitro 2.10.4                                                              15:11:54
                                                                                             15:11:54
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

  ➜ DevTools: press Shift + Option + D in the browser (v1.6.0)                               15:11:55

ℹ Nuxt Icon server bundle mode is set to local                                              15:11:56
✔ Nuxt Icon discovered local-installed 1 collections: heroicons                             15:11:57
✔ Vite client built in 29ms                                                                 15:11:58

 ERROR  Pre-transform error: [@vue/compiler-sfc] Failed to resolve extends base type.        15:11:58
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.

/Users/pj/node_modules/@nuxt/ui/dist/runtime/components/Button.vue
62 |
63 |  const loadingAutoState = ref(false)
64 |  const formLoading = inject<Ref<boolean> | undefined>(formLoadingInjectionKey, undefined)
   |                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
65 |
66 |  async function onClickWrapper(event: MouseEvent) {

✔ Vite server built in 480ms                                                                15:11:58
✔ Nuxt Nitro server built in 908 ms
 npm run dev

> dev
> nuxt dev

Nuxt 3.14.159 with Nitro 2.10.4                                                              15:11:54
                                                                                             15:11:54
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

  ➜ DevTools: press Shift + Option + D in the browser (v1.6.0)                               15:11:55

ℹ Nuxt Icon server bundle mode is set to local                                              15:11:56
✔ Nuxt Icon discovered local-installed 1 collections: heroicons                             15:11:57
✔ Vite client built in 29ms                                                                 15:11:58

 ERROR  Pre-transform error: [@vue/compiler-sfc] Failed to resolve extends base type.        15:11:58
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.

/Users/pj/node_modules/@nuxt/ui/dist/runtime/components/Button.vue
62 |
63 |  const loadingAutoState = ref(false)
64 |  const formLoading = inject<Ref<boolean> | undefined>(formLoadingInjectionKey, undefined)
   |                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
65 |
66 |  async function onClickWrapper(event: MouseEvent) {

✔ Vite server built in 480ms                                                                15:11:58
✔ Nuxt Nitro server built in 908 ms
I updated my node and npm version to be sure 
node -v
v22.11.0

 npm -v
10.9.0
node -v
v22.11.0

 npm -v
10.9.0
The issue exists in nuxt ui v2, v3 and can be reproduced with a plain new project: npx nuxi init -t ui frontend
5 Replies
kapa.ai
kapa.ai•2mo ago
Hi @UnRunDead. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- This issue appears to be related to a recent update in macOS and its interaction with Nuxt UI. Let's analyze the information provided and see if we can find a solution or workaround. The error you're encountering is a pre-transform error from the Vue compiler, specifically failing to resolve an extends base type. This is happening with Nuxt UI components, as evidenced by the error occurring in the Button.vue file from the @nuxt/ui package. While I don't have direct information about this specific error in relation to macOS 15.1 (24B83), there are a few things we can consider: 1. The error suggests using a Vue-specific ignore comment to bypass the issue: 
interface Props extends /* @vue-ignore */ Base {}
interface Props extends /* @vue-ignore */ Base {}
However, this would require modifying the Nuxt UI source code, which is not ideal. 2. The issue persists across different versions of Nuxt UI (v2 and v3) and can be reproduced with a fresh project, indicating it's not specific to your project configuration. 3. You've already updated Node.js and npm to the latest versions, which is a good troubleshooting step. Given the information available, here are some potential steps you could try: 1. Try using an older version of Node.js, as sometimes the latest versions can have compatibility issues with certain packages. You could try using Node.js 18 LTS, which is known to work well with Nuxt. 2. Clear your npm cache and node_modules folder, then reinstall dependencies: 
   npm cache clean --force
   rm -rf node_modules
   npm install
   
   npm cache clean --force
   rm -rf node_modules
   npm install
3. If you're using Yarn or pnpm, try switching to npm to see if the issue persists. 4. Check if there are any recent issues reported in the Nuxt UI GitHub repository (https://github.com/nuxt/ui/issues) related to this problem. If not, consider opening a new issue there with your specific environment details and error message. 5. As a temporary workaround, you could try using an older version of Nuxt UI that you know worked before the macOS update. If none of these steps resolve the issue, it might be worth waiting for updates from either Apple (for macOS) or the Nuxt team, as this could be a compatibility issue introduced by the recent macOS update. Remember to back up your project before making any significant changes. If you continue to face issues, consider reaching out to the Nuxt community on Discord or GitHub for more specific assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@288216321123024907> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
UnRunDead
UnRunDeadOP•2mo ago
@kapa.ai I downgraded to node 20.18.0 and cleaned the npm cache with reinstall of the packages. Issue not resolved
kapa.ai
kapa.ai•2mo ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize that the suggested steps did not resolve your issue. Let's explore some other potential solutions based on the information available in the knowledge sources. 1. Dependency Conflicts: There might be a conflict with some dependencies. One user reported success by downgrading vue-tsc to version 2.0.7 as mentioned in this GitHub comment (https://github.com/nuxt/nuxt/issues/22421). You could try this: 
   npm install [email protected] --save-dev
   
   npm install [email protected] --save-dev
2. TypeScript Configuration: Another user suggested enabling type checking in nuxt.config.ts as a workaround in the same GitHub issue (https://github.com/nuxt/nuxt/issues/22421): 
   export default defineNuxtConfig({
     typescript: {
       typeCheck: true,
     },
   // ...
   })
   
   export default defineNuxtConfig({
     typescript: {
       typeCheck: true,
     },
   // ...
   })
3. Nuxt Version: Ensure you're using the latest stable version of Nuxt. You can update it by running: 
   npx nuxi upgrade --force
   
   npx nuxi upgrade --force
4. Vite Configuration: If you're using a custom Vite configuration, try moving it into the Nuxt config file as suggested in this GitHub issue (https://github.com/nuxt/nuxt/issues/29601). Remove any separate vite.config.ts file and include the Vite options in your nuxt.config.ts: 
   export default defineNuxtConfig({
     // ... other config
     vite: {
       // Your Vite config here
     }
   })
   
   export default defineNuxtConfig({
     // ... other config
     vite: {
       // Your Vite config here
     }
   })
5. Nuxt Image Compatibility: If you're using @nuxt/image and you're on Nuxt 2, make sure you're using the correct version. Install it with this command as mentioned in a Stack Overflow answer (https://stackoverflow.com/questions/77340262): 
   npm i @nuxt/image@v0
   
   npm i @nuxt/image@v0
If none of these solutions work, it might be worth creating a minimal reproduction of the issue and opening a new issue on the Nuxt GitHub repository (https://github.com/nuxt/nuxt/issues). Provide details about your environment, the steps to reproduce, and the full error message. The Nuxt team or community might be able to provide more specific guidance based on your exact setup. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@288216321123024907> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Want results from more Discord servers?
Add your server