Auto-import for enum is not working: TS2749: 'User' refers to a value, but is being used as a type

[martinszeltins]

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

[AntoninRousset]

The issue seems to persist with classes:
https://stackblitz.com/edit/github-68jxaq-ygowgd?file=app.vue,common%2Ftypes%2Fuser.ts

[TheAlexLichter]

@AntoninRousset can you raise a new issue then? (feel free to link this one here then)