Nuxt•2mo ago

TypeScript strict mode causing false positive errors from node_modules Vue components (nuxt module)

Hey everyone! I'm stuck with a frustrating TypeScript issue and would love some help. Setup: I have a Nuxt module (@agorastore/shared-ui) with strict: true that type-checks perfectly fine when I run checks within the module itself This module is published to npm and consumed by my main Nuxt app My app also has strict: true enabled I'm using vue-tsc --noEmit for type checking + VSCode with Volar The Problem: When I run vue-tsc in my app, I get 46 TypeScript errors from the module's Vue component files in node_modules/@agorastore/shared-ui/dist/runtime//.vue. These are errors like: TS7053: Element implicitly has an 'any' type TS18048: 'X' is possibly 'undefined' TS2532: Object is possibly 'undefined' The Weird Part: If I disable strict: false in my app → errors disappear The module itself type-checks perfectly with strict mode enabled These feel like false positives since the module's source code is valid What I've Already Tried: ✅ skipLibCheck: true in tsconfig.json (already enabled) ✅ Adding node_modules to exclude array ✅ Excluding specific paths: "exclude": ["node_modules/@agorastore/shared-ui//"] ✅ Creating a separate tsconfig.typecheck.json with explicit includes ✅ Adding --skipLibCheck flag directly to vue-tsc command ✅ Various Nuxt-specific configurations None of these prevent vue-tsc from checking the .vue files in node_modules. The Question: How can I prevent TypeScript/vue-tsc from type-checking Vue component files that are distributed in node_modules, while still maintaining strict mode for my own app code? The module distributes compiled .vue files in its dist folder, and it seems like vue-tsc is directly analyzing these files rather than just using their type declarations

2 Replies

kapa.ai•2mo ago

Hi @ChronicStone - Cyprien. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Your issue—TypeScript strict mode surfacing errors from Vue components inside a Nuxt module’s node_modules directory, even with skipLibCheck: true and various excludes—has become more common with the adoption of strict type-checking and project references in Nuxt 3/4. What’s Happening - Nuxt’s TypeScript project references: With recent Nuxt versions, type-checking is split into multiple contexts (app, server, shared, node), and the generated .nuxt/tsconfig.*.json files are used for more granular type safety and IDE support. However, this can sometimes cause TypeScript (and vue-tsc) to type-check files in node_modules if they are included by the project references or not properly excluded [TypeScript Configuration Splitting]. - skipLibCheck: This only skips type-checking of .d.ts files in node_modules, not .vue or .ts source files. - Excludes: TypeScript’s exclude in tsconfig.json is not always respected when using project references, especially if the files are included by another referenced config [Migration Steps]. What the Nuxt Docs Say - Nuxt 3/4 generates multiple tsconfig files: .nuxt/tsconfig.app.json, .nuxt/tsconfig.server.json, .nuxt/tsconfig.shared.json, etc. These are referenced from your root tsconfig.json if you opt into project references [TypeScript Configuration Splitting]. - Excluding node_modules: By default, Nuxt-generated configs exclude node_modules, but there have been recent fixes to ensure this works correctly, especially with custom srcDir setups [fix(kit): only exclude node_modules/ if no custom srcDir]. - No mention of a Nuxt-specific way to prevent vue-tsc from type-checking .vue files in node_modules: The docs do not provide a direct solution for this scenario. What You Can Try (Based on Docs) 1. Check .nuxt/tsconfig.*.json Excludes
Ensure that all generated .nuxt/tsconfig.*.json files have "exclude": ["node_modules"] or similar. If not, you can extend or override these using the typescript.tsConfig option in your nuxt.config:

   export default defineNuxtConfig({
     typescript: {
       tsConfig: {
         exclude: ['node_modules'],
       },
     },
   })

   export default defineNuxtConfig({
     typescript: {
       tsConfig: {
         exclude: ['node_modules'],
       },
     },
   })

This should propagate to the generated configs [Nuxt TypeScript API]. 2. Project References
If you are using project references, make sure your root tsconfig.json does not include or reference the problematic files. Only reference the Nuxt-generated configs:

   {
     "files": [],
     "references": [
       { "path": "./.nuxt/tsconfig.app.json" },
       { "path": "./.nuxt/tsconfig.server.json" },
       { "path": "./.nuxt/tsconfig.shared.json" },
       { "path": "./.nuxt/tsconfig.node.json" }
     ]
   }

   {
     "files": [],
     "references": [
       { "path": "./.nuxt/tsconfig.app.json" },
       { "path": "./.nuxt/tsconfig.server.json" },
       { "path": "./.nuxt/tsconfig.shared.json" },
       { "path": "./.nuxt/tsconfig.node.json" }
     ]
   }

[Migration Steps] 3. Type Augmentation Placement
Make sure any type augmentations are only in app/, server/, or shared/ directories, as augmenting types outside these will not be recognized and may cause TypeScript to scan more files than necessary [Benefits of Project References]. Limitations - The knowledge sources do not provide a Nuxt-specific or vue-tsc-specific flag to skip type-checking .vue files in node_modules. The problem seems to be a limitation of how TypeScript and vue-tsc handle project references and file inclusion, not something Nuxt can directly control. - If the module publishes .vue files (not just .d.ts), TypeScript may still try to type-check them if they are included by any referenced config. Summary - Double-check the generated .nuxt/tsconfig.*.json files for proper exclude settings. - Use the typescript.tsConfig option in your nuxt.config to enforce excludes. - Ensure your root tsconfig.json only references the Nuxt-generated configs. - There is no Nuxt-documented way to force vue-tsc to skip .vue files in node_modules if they are included by a referenced config. If these steps do not resolve the issue, the knowledge sources do not contain a definitive solution for preventing vue-tsc from type-checking Vue files in node_modules while maintaining strict mode. You may need to adjust your module’s distribution (e.g., ship only type declarations, not .vue files) or follow up with the Nuxt or vue-tsc communities for a more targeted workaround. --- References:
- TypeScript Configuration Splitting
- Migration Steps
- Nuxt TypeScript API
- Benefits of Project References
- fix(kit): only exclude node_modules/ if no custom srcDir ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

Gaming

Programming

TypeScript strict mode causing false positive errors from node_modules Vue components (nuxt module)

Did you find this page helpful?