vue-tsc can not find vue files if module resolution is node12 or nodenext

[kalvenschraut]

Reproduction can be found here

I have been trying to migrate my codebase to use typescripts new esm modules and for that I need to use node12 or nodenext module resolution. Everything seems to work fine, but due to typescript needing extensions to correctly resolve files now, it appears vue-tsc is unable to find the vue files anymore. I did notice having vue.js did fix the issue for vue-tsc, but then I can't build with vite.

I can't seem to find any other alternative solutions to this problem, maybe I have to change something in my code base?

A possible solution to the problem maybe changing the file import path to vue.js with vue-tsc before calling tsc? If this is the desired direction, and if pointed in the right direction I can take a look at doing a PR.

[kalvenschraut]

This seems to affect the module resolution in my editor also.

[kalvenschraut]

Found a workaround, which is using .vue.js everywhere and added the below to my vite config

{
    resolve: {
      // seems first matched alias is used, so handle case where using @ alias and vue file has a .vue.js extension
      alias: [{
        find: /^@\/(.*)\.vue\.js$/,
        replacement: `${resolve('src')}/$1.vue`
      }, {
        find: /^(.*)\.vue\.js$/, 
        replacement: `$1.vue`
      }, {
        find: '@',
        replacement: resolve('src')
      }]
    }
}

I would still like to either see volar rewrite the .vue imports to .vue.js so typescript can lookup the types automatically for the user or for vite to automatically add this kind of alias, not sure which direction preferred at this point.

[pwang2]

using latest volar after merge #1542 , everything works fine but language server will complain. Have I missed anything?

[pwang2]

still quite confusing but fixed by adding env.d.ts with a generic vue module definition and include in tsconfig.json

/// <reference types="vite/client" />
/// <reference types="vue/macros-global" />

declare module "*.vue" {
  import { DefineComponent } from "vue"
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>
  export default component
}

[pwang2]

After adding the dumb module hack, in main.ts, if you go to definition of App.vue import, it takes you to the env.d.ts dumb module.

In App.vue, if you go to definition of HelloWorld.vue, it takes you to the actual file which is more desired.

So still, it is not quite a complete solution.

[johnsoncodehk]

@pwang2 see #1897 (comment)

[pwang2]

@johnsoncodehk , Takeover mode works for me in Neovim. Thanks! Great work on volar to make everyone's life better and better. 🙌

[AlansCodeLog]

Is nodenext resolution supposed to work with just the .vue extension (I can't seem to get that working, and takeover is enabled) or do we have to specify .vue.js?

[kalvenschraut]

it is suppose to but @johnsoncodehk it appears since typescript 5.0 I have to refer to ,vue.js again.
Update my original repo to typescript 5.0 and can be used to recreate.