Auto-import for enum is not working: TS2749: 'User' refers to a value, but is being used as a type
Closed this issue ยท 0 comments
Environment
Environment: Stackblitz
๐๏ธ
Working directory: /home/projects/github-68jxaq 12:13:23 PM
Nuxt project info: 12:13:23 PM
------------------------------
- Operating System: Linux
- Node Version: v18.18.0
- Nuxt Version: 3.9.3
- CLI Version: 3.10.0
- Nitro Version: 2.8.1
- Package Manager: npm@10.2.3
- Builder: -
- User Config: devtools, imports
- Runtime Modules: -
- Build Modules: -
------------------------------
Reproduction
https://stackblitz.com/edit/github-68jxaq?file=package.json,app.vue
Describe the bug
I noticed in Nuxt that auto-import for TypeScript enums was not working, so I reported it to Nuxt #25311 but as @manniL mentioned in that issue, this is an upstream bug with unimport
itself so I am opening the issue here. I am not familiar with unimport
or how it works and I wasn't able to get an example up and running with it but I do have a Nuxt reproduction and I hope that helps.
Here is the issue - I have a TypeScript enum in common/types/user.ts
and I want to use this enum in my app. (see Stackblitz reproduction). And it gets auto-imported by Nuxt but it seems to do it wrongly. Because if I manually import it myself it works (typechecker does not complain). But if I let Nuxt auto-import do it then then typechecker is throwing this error:
$ npm run typecheck
> vue-tsc --noEmit
app.vue:9:23 - error TS2749: 'User' refers to a value, but is being used as a type here. Did you mean 'typeof User'?
9 const myFunc = (user: User) => {
~~~~
Found 1 error in app.vue:9
nuxt.config.ts:
export default defineNuxtConfig({
devtools: { enabled: true },
imports: {
dirs: [
'common/**/*.ts',
]
}
})
user.ts:
export enum User {
ADMIN = 'admin',
USER = 'user',
}
app.vue
<template>
<div>My app</div>
<button @click="myFunc(User.ADMIN)">My button</button>
</template>
<script setup lang="ts">
// import { User } from './common/types/user';
const myFunc = (user: User) => {
if (user === User.ADMIN) {
console.log('admin');
} else {
console.log('user');
}
console.log(user);
};
</script>
If I add the import manually then typechecker does not complain ๐คท๐ปโโ๏ธ
import { User } from './common/types/user';
Additional context
No response
Logs
No response