Volar doesn't perform the source file redirect for project references

[segevfiner]

When's importing a file from a project reference, Volar doesn't redirect to the source file for completion, type checking, like the builtin tsserver support does: https://www.typescriptlang.org/tsconfig#disableSourceOfProjectReferenceRedirect. This allows type checking & auto completion, etc. To work in VS Code even before you build the dependent project's .d.ts.

Steps to reproduce

1. Clone https://github.com/segevfiner/vite-issue-1815
2. pnpm i
3. Open the project in VS Code.
4. Open apps/web/src/App.vue, check the offending import line which will warn with

Output file '.../vite-library-test/packages/foo-lib/src/index.d.ts' has not been built from source file '.../vite-library-test/packages/foo-lib/src/index.ts'.ts(6305)

5. Open apps/web/src/main.ts, notice there is no error for the same import there.

P.S. Why do I need https://github.com/segevfiner/vite-issue-1815/blob/229ca43e34e86b4d7bbb14940f7e5b00ca90dc42/apps/web/tsconfig.app.json#L10-L11 shouldn't this be figured out from the dependency between the projects? Is this TypeScript possibly getting confused due to the tsconfig.json not really specifying the actual output paths and them not matching with what Vite outputs?

[segevfiner]

Added a MWE.

[segevfiner]

It might be that Volar just doesn't work with project references properly at all... Weird stuff...

[johnsoncodehk]

It seems to be a troublesome problem, sorry I can't check quickly...

[segevfiner]

This is quite a complex config, I'm trying to create a monorepo project with multiple Vite apps and libs with the best DX I can get. But as always, it is proving a bit difficult. See vitejs/vite#9979

[gustavotoyota]

I think this is related to #1344

[gustavotoyota]

The problem is that Volar seems to be ignoring Declaration Maps (.d.ts.map files) so it doesn't redirect to the source when using Go To Definition. The built-in typescript extension redirects correctly using the .d.ts.map file.

[gustavotoyota]

Actually, the built-in typescript extension doesn't even need the .d.ts.map files to redirect correctly. It just sees that project references are enabled and automatically decides to redirect to the source when the developer uses Go To Definition.

Volar, on the other hand, displays "Cannot find module 'XXX' or its corresponding type declarations." when project references are enabled and it can't find the declaration files. If it can find the declaration files with project references enabled it then goes to the declaration file instead of the source file when the developer uses Go To Definition.

[segevfiner]

That's the source file redirect thing introduced in TS Server 3.7 that I linked in the PR description.

[johnsoncodehk]

"volar.vueserver.noProjectReferences": true seems also fix problem for this repro, if noProjectReferences have any problems please report to #1344.

[segevfiner]

@johnsoncodehk Thia will require generating declaration maps (On disk .d.ts.map files) and keeping them up-to-date, which are not generated by TS by default, nor by Vite, and require running tsc as they are not supported well by many other ts build tools. Project references obviate the need to do so.

[johnsoncodehk]

volar.vueserver.noProjectReferences is a VSCode setting and it only ignore project references for language server as a workaround of #1344, it will not affect tsc behavior.

[segevfiner]

Yes. But instead of supporting and using project references it falls back to non-project references mode, which means for go to definition to work I will have to generate declaration maps, something I don't need if project references are used and working correctly. It will be much more convenient for Volar to properly support project references rather than ignore them.

[johnsoncodehk]

I will have to generate declaration maps

You only need define compilerOptions.paths but not need to generate declaration with volar.vueserver.noProjectReferences, you can try this example: #1344 (comment)

1. Clone https://github.com/andrewthauer/ts-monorepo
2. Run yarn install
3. Run yarn build no need this step
4. setting "volar.vueserver.noProjectReferences": true in workspace settins
5. Open the file packages/web/src/index.ts
6. With Take Over mode active, ctrl+click on doubleNumbers: It will take you to the source file

[segevfiner]

paths gives a rootDir error because it then considers the source files of the other project to be part of the project itself, instead of an external dependency.

[johnsoncodehk]

Where are you see the error? (I can't find it)

[segevfiner]

[{
	"resource": "/Users/segevfiner/junk/vite-issue-1815/apps/web/src/App.vue",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": "6305",
	"severity": 8,
	"message": "Output file '/Users/segevfiner/junk/vite-issue-1815/packages/foo-lib/src/index.d.ts' has not been built from source file '/Users/segevfiner/junk/vite-issue-1815/packages/foo-lib/src/index.ts'.",
	"source": "ts",
	"startLineNumber": 4,
	"startColumn": 28,
	"endLineNumber": 4,
	"endColumn": 37
}]

And, of course, as described, this doesn't happen in main.ts in non take over mode in this same project.

[johnsoncodehk]

I think this is not project references problem, the problem is vue language server and tsserver pickup different tsconfig for apps/web/src/main.ts.

vue language server: apps/web/tsconfig.app.json
tsserver: apps/web/tsconfig.vitest.json

But this is expected behavior not a bug, because TypeScript have change this behavior before, but they don't have specification for tsconfig pickup priority.

Reopen this for later inspection.

[segevfiner]

@johnsoncodehk That one is an issue, which I reported separately in vuejs/create-vue#159, trying to add a project reference to both vitest and app configs doesn't seem to solve this issue.

[johnsoncodehk]

You can config "volar.vueserver.reverseConfigFilePriority": true in VSCode setting in next version.

[segevfiner]

Cool. I'll try once it's released and let you know if this fixed this issue.

[segevfiner]

It seems to be working now with the new setting after setting rootDir & outDir in the library tsconfig.app.json and flipping the order in tsconfig.json between app & vitest so both the tsserver and Volar pick up tsconfig.app.json. Those are changes we might want to apply to create-vue.

[segevfiner]

Argh. Spoke too soon. I had a stray paths there which made it work. The priority is now fixed with this new setting but the source file redirect still doesn't work.

Steps to reproduce

1. Clone https://github.com/segevfiner/vite-issue-1815
2. pnpm i
3. Open the project in VS Code.
4. Open apps/web/src/App.vue, and try to go to definition of HelloWorld or BAR, it will go to the .d.ts if built or error.
5. Open apps/node/src/index.ts, and try to go to definition of BAR, it goes to the ts file.

@johnsoncodehk

[segevfiner]

@johnsoncodehk Please reopen if you can reproduce the issue. It might be something wrong in tsserver with the way we set up the tsconfig in create-vue though.

[blake-newman]

should be resolved with: volarjs/volar.js#24