Types are not resolved when exported from vue file in monorepo setup

[minht11]

Vue - Official extension or vue-tsc version

v2.0.28

VSCode version

1.91.1

Vue version

3.4.33

TypeScript version

5.5.3

System Info

System:
    OS: macOS 14.5
    CPU: (8) arm64 Apple M1
    Memory: 71.83 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.proto/shims/node
    Yarn: 1.22.22 - ~/.proto/shims/yarn
    npm: 10.2.4 - ~/.proto/shims/npm
    pnpm: 9.6.0 - ~/.proto/shims/pnpm
  Browsers:
    Brave Browser: 126.1.67.123
    Chrome: 126.0.6478.183
    Chrome Canary: 128.0.6612.0
    Edge: 126.0.2592.113
    Safari: 17.5

Steps to reproduce

1. Clone repo
2. Launch it in VSCode
3. Observe error, because types from exported package are not resolved.

Screen.Recording.2024-07-23.at.02.31.18.mov

What is expected?

Imported type is unresolved

What is actually happening?

Import type should be resolved.

Link to minimal reproduction

https://github.com/minht11/vue-tsc-monorepo-import

Any additional comments?

This took a lot of time to narrow down. Having additional files made it work/fail. I do not see error when running CLI, but I do see it in my larger project, this is a problem from at least 2.0.22.

[minht11]

I also sometimes get on that repo.

Definitions of the following identifiers conflict with those in another file: __VLS_IntrinsicElements, __VLS_Element, __VLS_GlobalComponents, __VLS_IsAny, __VLS_PickNotAny, __VLS_intrinsicElements, __VLS_SelfComponent, __VLS_WithComponent, __VLS_FunctionalComponentProps, __VLS_IsFunction, __VLS_UnionToIntersection, __VLS_OverloadUnionInner, __VLS_OverloadUnion, __VLS_ConstructorOverloads, __VLS_NormalizeEmits, __VLS_PrettifyGlobalts-plugin(6200)

[RayGuo-ergou]

I don't think tsserver can read directly from .vue files in this way. Probably can try any one of these below:

1. used the built version for your design system e.g. ".": "./dist......"
2. Put design system and app under one tsconfig included array rather than reference
3. use defineComponent with ts file

[minht11]

I don't want to build my internal packages, huge DX downside.

Anyway it does work. I am successfully using this exact setup on 3 different monorepos.
Granted for now I am on:
vue: 3.4.31
vue-tsc: 2.0.22
typescript: 5.4.5

When I try to use those exact versions in reproduction it doen't work tho, not sure why. On latest version adding/removing additional files makes it work again, thats why reproducing it for mes was so hard.

[minht11]

I managed to make it work, somewhat. If you first open source file and then go to file where it is imported types are resolved correctly. However if you first go to target file, types are not. That behavior is present in 2.0.22 version too.

Screen.Recording.2024-07-24.at.17.58.17.mov

[minht11]

Setting "vue.server.hybridMode": "typeScriptPluginOnly" made it work I think. Even after reload types are present. Credit from #4611

[davidmatter]

Same as #4632 and #4611

[davidmatter]

You shouldn't export types from vue components. Just export them from normal ts files. That will resolve this issue

[minht11]

That is very non ergonomic. Vue supports exporting types/variables from components, I would expect Vue language server to support it as well. If this feature not expected to work it should not work at Vue level.

Anyway for now it works for us with "vue.server.hybridMode": "typeScriptPluginOnly" so there is still a discrepancy.

[davidmatter]

You're right - this should work

[codethief]

@minht11 May I ask why your /packages/app workspace both references your design-system folder in the tsconfig.json and also specifies it as dependency in package.json? Shouldn't it be either one or the other? In other words: Will (vue-)tsc resolve the import

import {
  Entry,
  type TypeFromVUEFile,
  type TypeFromTSFile,
} from "design-system";

by looking at the node_modules that pnpm set up or by following your tsconfig references?

[minht11]

Using latest version 2.1.6 and things work correctly even without "vue.server.hybridMode": "typeScriptPluginOnly" so closing it.

[minht11]

@codethief I am using moonrepo to handle things for me. More info https://moonrepo.dev/docs/guides/javascript/typescript-project-refs