N
Nuxt•2mo ago
Rechau

Unresolvable type reference or unsupported built-in utility type

My types in components are not recognized. When I use any type that is declared in ./types/*.d.ts in a component directory .vue file it just shows my an error "Unresolvable type reference or unsupported built-in utility type", but it works when I use same types in composables directory. Any idea why and/or how to fix it? ./types/user.d.ts 
type User = {
  id: number
  name: string
}
type User = {
  id: number
  name: string
}
./nuxt.config.ts (only typescript part) 
export default defineNuxtConfig({
  typescript: {
    typeCheck: true,
    tsConfig: {
      include: [
        './types/**/*.d.ts',
      ]
    }
  }
})
export default defineNuxtConfig({
  typescript: {
    typeCheck: true,
    tsConfig: {
      include: [
        './types/**/*.d.ts',
      ]
    }
  }
})
User type in vue file throws an error "Unresolvable type reference or unsupported built-in utility type"
3 Replies
kapa.ai
kapa.ai•2mo ago
Hi @Rechau. 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 can offer some insights and potential solutions to your issue with unrecognized types in Nuxt components. 1. First, it's important to note that Nuxt 3 automatically generates TypeScript configuration files for your project. As mentioned in the Nuxt TypeScript documentation, you should extend the auto-generated TypeScript configuration in your tsconfig.json: 
{
  "extends": "./.nuxt/tsconfig.json"
}
{
  "extends": "./.nuxt/tsconfig.json"
}
This ensures that your project uses the correct TypeScript settings, including the auto-generated path aliases. 2. The issue you're experiencing might be related to how TypeScript resolves types in .vue files. To address this, you can try adding a global declaration for your types. As suggested in a Stack Overflow answer, you can create a file like ~/types/my-types.d.ts with the following content: 
declare global {
  type User = {
    id: number
    name: string
  }
}

export {}
declare global {
  type User = {
    id: number
    name: string
  }
}

export {}
This declares the User type in the global namespace, which should make it available in your .vue files without explicit imports. 3. If the above solution doesn't work, you might need to check your vue-tsc version. According to a GitHub issue, Nuxt 3 doesn't work with vue-tsc version 2. Make sure you're using a compatible version of vue-tsc. 4. Another potential solution is to use the typeCheck option in your nuxt.config.ts file, as you've already done. However, make sure you have the necessary dependencies installed. As mentioned in the Nuxt Configuration documentation, you need to install typescript and vue-tsc as dev dependencies: 
npm install --save-dev vue-tsc typescript
npm install --save-dev vue-tsc typescript
5. If you're still experiencing issues, you might want to try running the nuxi typecheck command to check for any type errors in your project: 
npx nuxi typecheck
npx nuxi typecheck
This command can help identify any type-related issues that might be causing the problem. If none of these solutions resolve your issue, it might be worth creating a minimal reproduction of the problem and seeking further assistance from the Nuxt community or filing an issue on the Nuxt GitHub repository. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@159739178454745090> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Rechau
RechauOP•2mo ago
npx nuxi typecheck shows no errors

Did you find this page helpful?