#Problems with types in defineProps after upgrade to Nuxt 4

13 messages · Page 1 of 1 (latest)

sly rampartBOT
#

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

#

Short answer: this was a known TS/Volar typing regression around Nuxt 4.1 affecting SFC generics like defineProps/defineEmits. A fix landed in Nuxt and was released as a hotfix. Please upgrade Nuxt to the latest 4.x and re-run type generation.

What to try:

  • Upgrade Nuxt: npx nuxt upgrade, then ensure you’re on the latest 4.x. This includes fixes related to SFC typing and emits that also affected template inference. [Upgrade guide]
  • Regenerate types: run nuxt dev or nuxt build so .nuxt/nuxt.d.ts and the split tsconfig files are refreshed. [Auto-generated types; TS config splitting]
  • Typecheck with project references: update your script to use vue-tsc -b and the new .nuxt/tsconfig.* setup. [Type-checking; Migration steps]
  • Ensure <script setup lang="ts"> is set, otherwise generic TS like Pick won’t be parsed. [Stack Overflow answer]
  • If the error persists, it may be the same class of issue tracked/fixed in Nuxt PRs that corrected defineEmits/auto-import typings after 4.1.0. Updating should pull those fixes. [Issue 33142; Issue 33134]
#

If you still hit the ambient context error after upgrading and regenerating, the knowledge sources don’t provide a specific workaround for Pick beyond the general fixes above. In that case, please share a minimal repro; it may be a remaining Volar/Vue transform edge case similar to the ones linked. [Issue 33134]

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

#

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

copper valve
#

@sly rampart unfortunately it did not help. before I create a repro, any other suggeestions? or tsconfig settings I can try to make it work?

sly rampartBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

A few concrete things to try before making a repro:

  • Ensure your SFC uses TypeScript: add lang="ts" on script setup. Missing it can cause generic types like Pick to fail. [SO answer]

  • Regenerate Nuxt’s types/config after the upgrade:

    • Run nuxt prepare (or nuxt dev/build) so .nuxt/nuxt.d.ts and the split tsconfig files are recreated. [Auto-generated types]
    • Opt into project references in your root tsconfig.json, then typecheck with vue-tsc -b: [Migration steps; Type-checking]
    {
  "files": [],
  "references": [
    { "path": "./.nuxt/tsconfig.app.json" },
    { "path": "./.nuxt/tsconfig.server.json" },
    { "path": "./.nuxt/tsconfig.shared.json" },
    { "path": "./.nuxt/tsconfig.node.json" }
  ]
}

    And in package.json:

    nuxt prepare && vue-tsc -b --noEmit

  • If you extended the legacy .nuxt/tsconfig.json, switch to the new split configs above; overriding paths in your own tsconfig can break Nuxt’s module resolution like #imports. [Auto-generated types; Bridge TS notes]

  • Run nuxt typecheck (with vue-tsc/typescript installed) to surface TS config issues explicitly. [Type-checking]

#
  • If you rely on global types in defineProps’ generic, be aware there have been issues with unresolvable/global types in SFC generics after 4.x changes; a Nuxt fix was proposed. As a temporary workaround, ensure the type is visible to Vue’s global type files or wrap it inside an object type. [Issue 29757]

If none of the above helps, the knowledge sources don’t provide a specific tsconfig flag to fix Pick in defineProps beyond adopting the new project references and regenerating types. In that case, a minimal repro would help confirm if you’re hitting the same edge case. [Migration steps]

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

#

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

copper valve
#

@sly rampart when trying to reproduce with minimal nuxt setup, I am not getting this error. any suggestions?

sly rampartBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

A few things that commonly hide the issue when you try a minimal repro:

  • Ensure the file actually uses TypeScript: script setup must have lang="ts", otherwise generics like Pick can misbehave. [SO answer]
  • Regenerate Nuxt’s types after upgrade: run nuxt dev or nuxt prepare so the new split tsconfig files and .nuxt/nuxt.d.ts are refreshed. [Type-checking; TS config splitting]
  • Verify your editor/TS server points at the new split configs (project references). If your real project still extends the legacy .nuxt/tsconfig.json or overrides paths, it might differ from the minimal repro. [Benefits of project references; TS config splitting]
  • Run npx nuxt typecheck (with vue-tsc and typescript installed) to surface config/type errors that don’t show at runtime. [Type-checking]
  • If you’re using global types in defineProps, note there were recent fixes around SFC generics/global type visibility; issues can surface only in larger projects. As a temporary check, wrap the global type within an object or ensure it’s included in Vue global type files. [Issue 29757]
#

If the error still only appears in your main project, it’s likely due to differences in tsconfig or global type augmentation. Sharing a small repro extracted from the real repo (keeping its tsconfig and any global d.ts files) would help confirm.

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