#`#shared` types. Failed to resolve extends base type.

9 messages · Page 1 of 1 (latest)

violet creek
#

I'm trying to use the new #shared functionality and have a ./shared/types/Budget.ts file that exports multiple interfaces. I can successfully use them automatically in my code and VSCode knows about them. However, when I run the nuxt app, I get Internal server error: [@vue/compiler-sfc] Failed to resolve extends base type.

simple boltBOT
#

Hi @violet creek. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

I apologize, but the knowledge sources provided do not contain specific information about the #shared functionality or the error you're encountering with resolving extends base types. The documents don't mention this particular feature or error message.

However, based on the general information about Nuxt and TypeScript support, I can suggest a few things to check:

  1. Make sure your Nuxt version is up to date, as the #shared functionality might be a recent feature.

  2. Verify that your tsconfig.json is correctly set up. Nuxt automatically generates a .nuxt/tsconfig.json file with recommended configurations Nuxt TypeScript docs (https://nuxt.com/docs/guide/concepts/typescript#nuxttsconfigjson).

  3. Check if your nuxt.config.ts file has any custom TypeScript configurations that might interfere with type resolution.

  4. Ensure that the types in your ./shared/types/Budget.ts file are correctly exported and don't have any circular dependencies.

If the issue persists, you might want to:

  1. Check the open issues on the Nuxt GitHub repository (https://github.com/nuxt/nuxt/issues) to see if this is a known issue.
  2. Consider reporting this as a potential bug (https://nuxt.com/docs/community/getting-help#could-there-be-a-bug) if you can't find a solution, as it might be related to the new #shared functionality.

For more accurate assistance, you may need to provide additional details about your setup and configuration.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

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

violet creek
#

I'm trying to use the shared types for my component props, for example:
This is my ./shared/types/Budget.ts

export interface BudgetItem {
    name: string
    available: number
}

export interface BudgetCategory {
    name: string
    items: BudgetItem[]
}

export interface Budget {
    name: string
    categories: BudgetCategory[]
}

This is my ./app/components/Budget/Item.vue

<script setup lang="ts">
interface Props extends BudgetItem {}

defineProps<Props>()
</script>

<template>
    <div>
        <div>{{ name }}</div>
        <div>{{ available }}</div>
    </div>
</template>
violet creek
shrewd hemlock
#

I've run into this issue since this feature was first released. Hard to tell if this is a bug or a known limitation of vue. However, for now, I'm just importing these directly from '#shared'

violet creek
#

If I try that in my script setup, I get Cannot find module '#shared' or its corresponding type declarations.