Skip to content

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

Closed
@codethief

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingupstream

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions