VSCode complains about *.vue imports across project boundaries when using project references

[codethief]

Vue - Official extension or vue-tsc version

Vue extension 2.1.2, vue-tsc 2.1.2

VSCode version

1.90.2 (VSCodium 1.90.2.24171)

Vue version

3.4.34

TypeScript version

5.4.5

System Info

No response

Steps to reproduce

Same steps as in https://github.com/vuejs/language-tools/issues/4711

Minimal reproduction: https://github.com/codethief/tsconfig-playground/tree/0362154d1b9ab1260960016338f77db2a265ea92/2024-07-25-vue-setup-with-project-references

What is expected?

Same expectations as in https://github.com/vuejs/language-tools/issues/4711

What is actually happening?

VSCode / the Vue extension complains about imports from HelloWorld.vue in HelloWorld.spec.ts:

HelloWorld.vue is not listed within the file list of project […]/tsconfig-playground/2024-07-25-vue-setup-with-project-references/tsconfig.vitest.json'. Projects must list all files or use an 'include' pattern.

Screenshot:

Compared to https://github.com/vuejs/language-tools/issues/4711,

• VSCode now does recognize a type error that I added to that file.
• VSCode now does provide code suggestions when using the imported type & component.

Meanwhile, vue-tsc on the command line works fine.

Link to minimal reproduction

https://github.com/codethief/tsconfig-playground/tree/0362154d1b9ab1260960016338f77db2a265ea92/2024-07-25-vue-setup-with-project-references

Any additional comments?

Overall, this issue sounds very similar to the original https://github.com/vuejs/language-tools/issues/3526 whose fix led to(?) the aforementioned https://github.com/vuejs/language-tools/issues/4711.

[davidmatter]

Hi, this is a configuration error. If you want to import files in your tests, you must include src - otherwise TS can't resolve the import.

[davidmatter]

Hint: Check the tsconfig setup when you execute pnpm create vue@latest --typescript --vitest

[codethief]

Hi David!

Hi, this is a configuration error.

I don't think it is. The whole point of project references is to not include files from project 1 in the tsconfig of a dependent project 2 but instead to have tsconfig.project2.json just list project 1 in its references. See e.g. the TypeScript repo where they make extensive use of this (example). Besides, everything seems fine when type-checking on the command line.

Moreover, in my experience it is a rather bad idea for tsconfigs to have overlapping includes. The type checker on the CLI and different IDEs will typically no longer agree on which tsconfig to use to type-check a given file, see also my comment here.

Hint: Check the tsconfig setup when you execute pnpm create vue@latest --typescript --vitest

This is somewhat of a misconfiguration in create-vue, see this discussion and this PR to fix it.

[davidmatter]

I've looked at this again and played with your repo. You're right - there's a difference in behavior between importing vue files and ts files.

Edit: Would you kindly update your reproduction repository to only contain the reproduction for this issue? As minimal as possible. We're looking into this.

[codethief]

We're looking into this.

Thanks so much, it is highly appreciated!

Edit: Would you kindly update your reproduction repository to only contain the reproduction for this issue? As minimal as possible.

Will do!

[codethief]

@davidmatter I have uploaded a minimal reproduction.

[PindaPixel]

I ran into this as well a while ago https://github.com/vuejs/language-tools/issues/4516