Nuxt•5w ago

ui3

ERROR Pre-transform error: [@vue/compiler-sfc] Failed to resolve extends base type. 6:51:55 PM
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.

11 Replies

kapa.ai•5w ago

Hi @mrskiii. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- This error message is related to a TypeScript compilation issue in Vue 3 and Nuxt 3. The error occurs when the compiler fails to resolve the base type in an interface extension. Here's an explanation and potential solution based on the provided knowledge sources: The error message suggests that this might be a breaking change introduced in Vue 3.3 or later. To resolve this issue, you have a couple of options: 1. Add the /* @vue-ignore */ comment before the extends clause, as suggested in the error message:

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

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

2. Ensure that you're using the correct version of @vue/compiler-sfc. According to a recent update, Nuxt is pinning the devDependency @vue/compiler-sfc to version 3.4.21 Nuxt GitHub PR. If you're using Nuxt 3, make sure your project is up to date with the latest version, which should include this fix. It's also worth noting that TypeScript support in Nuxt 3 is built-in, and you can opt-in by renaming your files from .js to .ts, or by adding <script setup lang="ts"> in your components Nuxt Documentation. If the issue persists after trying these solutions, you may need to check your project's configuration and ensure all dependencies are up to date. If you're still encountering problems, you might want to create a minimal reproduction of the issue and seek further assistance from the Nuxt community or official support channels. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5w ago

<@905374706474045440> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

mrskiiiOP•5w ago

@kapa.ai this is an error with nuxtui3

kapa.ai•5w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize, but I don't have enough information in the provided knowledge sources to specifically address an error with NuxtUI 3. The error you mentioned in the previous conversation was related to Vue 3 and TypeScript compilation, but it wasn't specifically about NuxtUI 3. To better assist you with an error related to NuxtUI 3, I would need more details about the specific error you're encountering. Could you please provide: 1. The exact error message you're seeing 2. The code snippet where the error occurs 3. Your Nuxt and NuxtUI versions With this additional information, I might be able to provide a more accurate and helpful answer. If you can share these details, I'll do my best to assist you based on the available knowledge sources or guide you to the appropriate resources. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5w ago

<@905374706474045440> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

mrskiiiOP•5w ago

@kapa.ai ERROR Pre-transform error: [@vue/compiler-sfc] Failed to resolve extends base type. 6:51:55 PM
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. /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) { Plugin: vite:vue File: /node_modules/@nuxt/ui/dist/runtime/components/Button.vue (x2)

kapa.ai•5w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for providing more details about the error. This error is indeed related to NuxtUI, specifically with the Button component. The error occurs during the compilation of the Vue Single File Component (SFC) in the NuxtUI package. Let's break down the issue and possible solutions: 1. The error is occurring in the file /node_modules/@nuxt/ui/dist/runtime/components/Button.vue, which is part of the NuxtUI package. 2. The specific line causing the issue is:

   const formLoading = inject<Ref<boolean> | undefined>(formLoadingInjectionKey, undefined)

   const formLoading = inject<Ref<boolean> | undefined>(formLoadingInjectionKey, undefined)

3. This error suggests that there might be a compatibility issue between the versions of Vue, Nuxt, and NuxtUI you're using. To resolve this issue, you can try the following steps: 1. Update your dependencies: Make sure you have the latest compatible versions of Nuxt and NuxtUI. According to the Nuxt UI documentation, you should use Nuxt UI 2.20.0 or later with Nuxt 3.15.0 or later. Update your package.json to include:

   {
     "dependencies": {
       "nuxt": "^3.15.0",
       "@nuxt/ui": "^2.20.0"
     }
   }

   {
     "dependencies": {
       "nuxt": "^3.15.0",
       "@nuxt/ui": "^2.20.0"
     }
   }

Then run npm install or yarn install to update the packages. 2. Clear your cache: Sometimes, clearing the Nuxt cache can help resolve compilation issues. Run:

   npx nuxi cleanup

   npx nuxi cleanup

3. If the issue persists, you might need to add the /* @vue-ignore */ comment as suggested in the error message. However, this should be done in your own code rather than modifying the node_modules files directly. If you're extending the Button component, you can use:

   interface MyButtonProps extends /* @vue-ignore */ ButtonProps {
     // Your additional props here
   }

   interface MyButtonProps extends /* @vue-ignore */ ButtonProps {
     // Your additional props here
   }

4. If none of the above steps work, you may need to create a custom build of the Button component in your project, copying the source from NuxtUI and modifying it to work with your specific setup. If you continue to face issues after trying these steps, I recommend reaching out to the NuxtUI GitHub repository to report the issue, providing details about your setup and the steps to reproduce the error. Remember to always back up your project before making significant changes, and test thoroughly after applying any fixes. Nuxt UI documentation ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5w ago

<@905374706474045440> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

mrskiiiOP•5w ago

@kapa.ai im on nuxtui v3

kapa.ai•5w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize for the confusion in my previous response. You're correct that you're using NuxtUI v3, which is a more recent version than what I initially mentioned. Let me provide you with an updated answer based on the latest information about NuxtUI v3. NuxtUI v3 is currently in alpha stage, as indicated by the @nuxt/[email protected] version mentioned in one of the knowledge sources. This alpha version is designed to work with Nuxt 3 and Vue 3. Given that you're using an alpha version, it's possible that you're encountering some bugs or compatibility issues. Here are some steps you can take: 1. Ensure you're using the latest alpha version of NuxtUI v3. You can update it in your package.json:

   {
     "dependencies": {
       "@nuxt/ui": "^3.0.0-alpha.9"
     }
   }

   {
     "dependencies": {
       "@nuxt/ui": "^3.0.0-alpha.9"
     }
   }

Then run npm install or yarn install to update the package. 2. Make sure you're using a compatible version of Nuxt. According to the GitHub issue, NuxtUI v3.0.0-alpha.9 was being used with Nuxt 3.15.0. Update your Nuxt version if necessary:

   {
     "dependencies": {
       "nuxt": "^3.15.0"
     }
   }

   {
     "dependencies": {
       "nuxt": "^3.15.0"
     }
   }

3. Clear your Nuxt cache:

   npx nuxi cleanup

   npx nuxi cleanup

4. If you're still encountering the error, it might be a known issue with the alpha version. I recommend checking the NuxtUI GitHub repository for any open issues related to the error you're seeing, or consider opening a new issue if you can't find a similar one. 5. As NuxtUI v3 is in alpha, be prepared for potential breaking changes or bugs. Keep an eye on the repository for updates and consider subscribing to notifications for new releases. If you need a more stable version for production use, you might want to consider using the latest stable version of NuxtUI (v2.x) until v3 reaches a stable release. Remember to always back up your project before making significant changes, and test thoroughly after applying any updates or fixes. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5w ago

<@905374706474045440> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

ui3

Did you find this page helpful?