Nuxt•2w ago

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

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.

6 Replies

kapa.ai•2w ago

Hi @bnason. 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: ----------------------

kapa.ai•2w ago

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

bnasonOP•2w ago

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[]
}

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>

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

defineProps<Props>()
</script>

<template>
    <div>
        <div>{{ name }}</div>
        <div>{{ available }}</div>
    </div>
</template>

Reproduction: https://codesandbox.io/p/devbox/lrzygp

bnasonOP•2w ago

Issue opened: https://github.com/nuxt/nuxt/issues/30213

GitHub

Shared folder types and extending interface in Vue component setup ...

Environment Nuxt project info: 1:33:35 PM Operating System: Linux Node Version: v22.3.0 Nuxt Version: 3.14.1592 CLI Version: 3.16.0 Nitro Version: 2.10.4 Package Manager: [email protected] Builder: - User...

Cue•2w ago

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'

bnasonOP•2w ago

If I try that in my script setup, I get Cannot find module '#shared' or its corresponding type declarations. I CAN however do import type { BudgetItem } from '#build/imports'

Gaming

Programming

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