v3 UI alpha throws typescript error [plugin:vite:vue] [@vue/compiler-sfc] Failed to resolve extends
The error is coming from the Button component in line 65 as given below. How can I reslove this issue? I am using latest nuxt and yarn as the package manager
ERROR Internal server error: [@vue/compiler-sfc] Failed to resolve extends base type. 6:18:59 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.
/Users/gitamgadtaula/Desktop/work/grt/projects/nuxt3/node_modules/@nuxt/ui/dist/runtime/components/Button.vue
63 |
64 | const loadingAutoState = ref(false) 65 | const formLoading = inject<Ref<boolean> | undefined>(formLoadingInjectionKey, undefined)
64 | const loadingAutoState = ref(false) 65 | const formLoading = inject<Ref<boolean> | undefined>(formLoadingInjectionKey, undefined)
5 Replies
Hi @Decisive Lieutenant. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided in the knowledge sources, I don't have enough specific details to directly address the TypeScript error you're encountering with the Button component in Nuxt UI v3 alpha. However, I can provide some general guidance based on related information:
1. The error you're seeing is related to TypeScript compilation, specifically with resolving extends for a type.
2. This issue might be related to recent changes in Vue's TypeScript support. As mentioned in the Nuxt blog post about v3.13, there have been some Vue TypeScript changes that could affect type checking.
3. To potentially resolve this issue, you could try the following:
a. Make sure you have the latest versions of Nuxt and @nuxt/ui installed.
b. If you're using VS Code, ensure you have the Volar extension installed and properly configured for Vue 3 and TypeScript.
c. As a temporary workaround, you could try adding the
b. If you're using VS Code, ensure you have the Volar extension installed and properly configured for Vue 3 and TypeScript.
c. As a temporary workaround, you could try adding the
/* @vue-ignore */ comment before the extends clause as suggested in the error message:
However, note that this is just ignoring the type-checking for that specific line and doesn't solve the underlying issue.
4. If the problem persists, it might be worth checking for any open issues or discussions in the Nuxt UI repository or considering opening a new issue there, as this seems to be specifically related to the Nuxt UI component.
5. Additionally, ensure that your tsconfig.json is properly set up. You might want to check if it's extending the Nuxt-generated TypeScript configuration as mentioned in the Nuxt TypeScript documentation.
If these suggestions don't resolve your issue, I recommend reaching out to the Nuxt community or opening an issue in the Nuxt UI repository with a minimal reproduction of your problem for more specific assistance.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@463307450402078720> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai how can i build the nuxt modules i forked?
Let me check the knowledge base for you again. One moment! :books:
----------------------
To build Nuxt modules you've forked, you can use the
nuxi build-module command. This command is specifically designed for building Nuxt modules before publishing. Here's how you can do it:
1. First, make sure you're in the root directory of your forked module.
2. Then, run the following command:
This command will use @nuxt/module-builder to generate a dist directory within your module's root directory, containing the full build for your Nuxt module.
Here are some additional options you can use with the build-module command:
- --build: Build the module for distribution
- --stub: Stub the dist instead of actually building it (useful for development)
- --sourcemap: Generate sourcemaps
- --prepare: Prepare the module for local development
For example, if you want to build the module with sourcemaps, you can use:
Remember to check if there are any specific build instructions in the module's documentation, as some modules might have custom build processes.
For more detailed information about the build-module command and its options, you can refer to the Nuxt documentation on nuxi build-module.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@463307450402078720> Kapa.ai is still learning and improving, please let me know how I did by reacting below.