final tartan
TypeScript Module Augmentation Not Working in Indirect Usage
I'm trying to override types from a Nuxt module in my Nuxt app, but the augmentation only works when explicitly importing the type.
Module Side (@agorastore/shared-ui):
In my module setup:
import { addTemplate, defineNuxtModule } from '@nuxt/kit'
export default defineNuxtModule({
setup(options, nuxt) {
// Add type template
const typeTemplate = addTemplate({
filename: 'types/ui.d.ts',
write: true,
getContents: () => `
declare module '@agorastore/shared-ui' {
export interface AppTypes {
accessKey: string
}
}
`
})
// Register types
nuxt.hook('prepare:types', (options) => {
options.references.push({ path: typeTemplate.dst })
})
}
})
// These types are used in the module's features
import type { AppTypes } from '@agorastore/shared-ui'
export type ActionRenderer = {
type: 'render'
render: () => VNodeChild
accessKeys?: Array<AppTypes['accessKey']>
}
App Side (nuxt 3 app):
// app/app-env.d.ts
declare module '@agorastore/shared-ui' {
export interface AppTypes {
accessKey: AccessKeyPath // My custom type
}
}
export {}
The Issue:
When using a component that indirectly uses the AppTypes, the augmentation doesn't work:
// This shows accessKeys as string[]
useDropdown([{
type: 'render',
render: () => <div>Content</div>,
accessKeys: [''] // Type is string[] instead of AccessKeyPath[]
}])
// BUT if I add this import at the top, it works:
import type { AppTypes } from '@agorastore/shared-ui'
Why isn't the module augmentation working globally without needing the explicit import? Is there a way to make it work without needing to import the type in every file?
Environment
- TypeScript 5.x
- Nuxt 3
- Module is a Nuxt module
Let me know if you need any additional info!
astral temple