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

[codethief]

Vue - Official extension or vue-tsc version

Vue extension 2.0.28, vue-tsc 2.0.29

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

Use npm create vue to set up a new Vue project. Adjust tsconfig.(app|vitest).json in such a way that their includes don't overlap (tsconfig.app.json includes only production code, tsconfig.vitest.json only test code) and so that tsconfig.vitest.json lists tsconfig.app.json in its references.

What is expected?

VSCode is able to resolve the imports correctly, recognize the type error in the file, and also provide code suggestions when using the imported type & component.

What is actually happening?

VSCode / the Vue extension complains about imports from HelloWorld.vue in HelloWorld.spec.ts and doesn't recognize a type error that I added to that file. It also doesn't provide code suggestions when using the imported type & component.

See also the screenshots I posted here.

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

Link to minimal reproduction

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

Any additional comments?

This is the issue we started discussing in #3526 (comment), just as a separate ticket.

I hope you'll allow me to mention some more anecdotal evidence, beyond the minimal reproduction:

• My coworker also saw the same issue with *.vue imports in test files in our frontend project in IntelliJ 2024.2.0.2 (with Vue.js plugin 242.20224.419). Meanwhile, in the minimal reproduction I linked to above his IntelliJ does not complain. Interestingly, my coworker noticed that in the minimal reproduction IntelliJ's bottom bar reports the Vue LSP to be active, whereas in the *.test.ts files in our real-life project both TS and Vue are active. I don't know what that means / implies but it reminded me of @vidal7's comment here.

• I should mention that this issue does not seem to be restricted to *.ts files. In our project we have a few non-production *.vue files (Histoire *.story.vue files) that import production Vue components and, there, VSCode reports a broken import, too.

[johnsoncodehk]

I haven't checked the repro case yet, but I think it's likely related to microsoft/TypeScript#57632.

[davidmatter]

Isn't this related to #4632?

[codethief]

@johnsoncodehk I'm not sure. Isn't the given issue about situations when there are tsconfigs with overlapping includes? (E.g. look at apps/web/tsconfig.app.json vs. apps/web/tsconfig.vitest.json or packages/foo-lib/tsconfig.app.json vs. packages/foo-lib/tsconfig.vitest.json in OP's example.)

In any case, in the minimal reproduction I linked 1) there are no overlapping includes and 2) VSCode shows the correct tsconfig for every file. I also have my tsconfig.app.json include *.vue files explicitly.

[codethief]

@davidmatter

Isn't this related to #4632?

I'm not sure it is. In the ticket you linked, OP's example code uses separate pnpm workspaces for their folders /app and /ui (each with its own set of tsconfig.jsons) and then they reference the ui workspace in their /app/package.json:

  "dependencies": {
    "ui":"workspace:*",

so as to make it available in their app's node_modules.

To me this sounds different from the situation in my code example: I have a single workspace and a single package.json, and my production and test code are covered by the same solution-style tsconfig.json (which references tsconfig.app.json for the production code and tsconfig.vitest.json for the test code). In particular, imports across project reference boundaries rest on TSC emitting declarations which I think(?) is different from how importing raw TS/Vue code from node_modules works.

[codethief]

While the changes in v2.1.2 have improved the type checks & code suggestions, VSCode still complains about the imports themselves. I have created a new ticket -> #4750