Nuxt module type errors leak into app typecheck

I have an internal nuxt module @agorastore/shared-ui, which is consumed by a nuxt app. Locally, on the module code, I don't have any type errors, everything is properly typed & works fine. But when I build & release the module, the build output has some type issues I don't have on the module code. These type issues aren't a big deal, they don't cause harm & the module works as excepted. Except for one thing : when I run nuxi typecheck on my app, these errors leak into the app type errors :
Found 18 errors in 6 files.

Errors Files
3 app/entities/items/schema.tsx:107
5 node_modules/@agorastore/shared-ui/dist/runtime/components/layout/FloatingSidebar.vue:82
6 node_modules/@agorastore/shared-ui/dist/runtime/components/layout/SidebarNavigation.vue:41
1 node_modules/@agorastore/shared-ui/dist/runtime/lib/form/components/field/ArrayTabField.vue:137
2 node_modules/@agorastore/shared-ui/dist/runtime/lib/form/components/field/CheckboxGroupField.vue:55
1 node_modules/@agorastore/shared-ui/dist/runtime/lib/form/components/field/TextField.vue:40
Found 18 errors in 6 files.

Errors Files
3 app/entities/items/schema.tsx:107
5 node_modules/@agorastore/shared-ui/dist/runtime/components/layout/FloatingSidebar.vue:82
6 node_modules/@agorastore/shared-ui/dist/runtime/components/layout/SidebarNavigation.vue:41
1 node_modules/@agorastore/shared-ui/dist/runtime/lib/form/components/field/ArrayTabField.vue:137
2 node_modules/@agorastore/shared-ui/dist/runtime/lib/form/components/field/CheckboxGroupField.vue:55
1 node_modules/@agorastore/shared-ui/dist/runtime/lib/form/components/field/TextField.vue:40
The only valid app-level error here is the first one, all the others shouldn't be visible on my app when type-checking. I've tried various things, such as flagging the package in 'exclude' in tsconfig, enabling skipLibCheck, but no matter what I try, I can't figure out how to exclude these errors from the app-level type errors. This prevents me from enabling typecheck in CI for example, which is quite a big deal
3 Replies
kapa.ai
kapa.ai4w ago
Hi @ChronicStone. 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 Nuxt module type errors leaking into app typecheck. The problem you're experiencing seems to be related to how TypeScript handles type checking in Nuxt projects, especially when using custom modules. Here are some potential approaches to address this: 1. Update vue-tsc version: Make sure you're using the latest version of vue-tsc. As mentioned in the Nuxt TypeScript documentation, you should install vue-tsc and typescript as development dependencies. The recent update suggests using vue-tsc@^2 or later:
npm install --save-dev vue-tsc@^2 typescript

npm install --save-dev vue-tsc@^2 typescript

This might resolve some compatibility issues between Nuxt and the TypeScript compiler. 2. Configure typescript.typeCheck in nuxt.config: You can try enabling type checking at build or development time by setting the typescript.typeCheck option in your nuxt.config file, as mentioned in the Nuxt Configuration documentation:
export default defineNuxtConfig({
typescript: {
typeCheck: true
}
})

export default defineNuxtConfig({
typescript: {
typeCheck: true
}
})

This might help isolate the type checking process and potentially exclude external module errors. 3. Use a custom tsconfig.json for the server directory: As suggested in the Nuxt server types documentation, you can create a separate tsconfig.json file for your server directory. This might help in separating type checking concerns:
// server/tsconfig.json
{
"extends": "../.nuxt/tsconfig.server.json"
}

// server/tsconfig.json
{
"extends": "../.nuxt/tsconfig.server.json"
}

4. Adjust ESLint configuration: If you're using ESLint, you might want to adjust its configuration to ignore certain type errors. The @nuxt/eslint-config allows you to customize the ESLint setup:
// eslint.config.mjs
import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt([
// Your custom ESLint configuration
])

// eslint.config.mjs
import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt([
// Your custom ESLint configuration
])

5. Consider using --legacy-peer-deps: As a last resort, if you're facing dependency conflicts, you might try using the --legacy-peer-deps flag when installing packages, as suggested in a Stack Overflow post:
npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser --legacy-peer-deps

npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser --legacy-peer-deps

However, use this option cautiously as it might mask underlying compatibility issues. If none of these solutions work, you might need to investigate further into the specific type errors you're encountering. It's possible that there's an issue with how the types are being generated or exported from your @agorastore/shared-ui module. Remember, the goal is to find a balance between strict type checking and practical development workflow. Sometimes, it might be necessary to selectively ignore certain errors if they don't impact the functionality of your application. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai4w ago
<@372104941348585473> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
ChronicStone
ChronicStoneOP4w ago
UP on this, still having the issue

Did you find this page helpful?