Errors with path aliases, possible weird loading of tsconfig/jsconfig files

[jonasclement]

Hi,
Unfortunately I can't make a reproduction trigger the same problem as our main repo, but this repo should give an idea of our setup: https://github.com/jonasclement/volar-complex-repo

Basically:

• The root directory is a legacy, AngularJS frontend
• The "vue" directory is our new vue/vite frontend, which is the only one Volar should be affecting

Volar version: 2.0.5
VSCode version: 1.87.0

In our main repository, inside the vue directory, any aliased import a la @/something or @components/something.vue gets a Cannot find module '@/something' or its corresponding type declarations. ts-plugin(2307).

However, saving any of the project's tsconfig.json or jsconfig.json files will cause these to go away until the next TS server restart, with Intellisense and type checking still working perfectly. However, syntax highlighting for components in templates is broken, as these are the color of standard HTML tags rather than the color a component would normally have.

What can we do to resolve this?

[GianpaoloPascasi]

I solved downgrading VSCode Vue - Official extension to 1.8.27 (I updated it to 2.0).
Otherwise it seems you need to upgrade your VUE project TS version to 5.0 but i didn't try.

[jonasclement]

Our project (the one in the vue directory in the linked repro) is using TypeScript 5.3, so that doesn't seem to be the factor. We have downgraded to 1.8.27 for now as well.

[johnsoncodehk]

It seems normal to me. What does the error look like in your screen? Sharing your system info (use the Help: About command) and extension list (Execute Help: Report Issue... >> Click "show" at Include my enabled extensions) may help reproduce the problem.

[Laurelin]

VScode was entirely ignoring intellisense on my template tags. No components, no variables. TS is 5.0.4 in package and tsc version is 5.3.3, so that did not help.

downgrading to 1.8.27 solved for me as well

I solved downgrading VSCode Vue - Official extension to 1.8.27 (I updated it to 2.0). Otherwise it seems you need to upgrade your VUE project TS version to 5.0 but i didn't try.

[Laurelin]

There is no error, there is just no intellisense on template tags.

but the extra info is here:

Version: 1.87.0
Commit: 019f4d1419fbc8219a181fab7892ebccf7ee29a2
Date: 2024-02-27T23:42:51.279Z
Electron: 27.3.2
ElectronBuildId: 26836302
Chromium: 118.0.5993.159
Node.js: 18.17.1
V8: 11.8.172.18-electron.0
OS: Darwin arm64 23.3.0

CPUs	Apple M1 Pro (8 x 24)
GPU Status	2d_canvas: enabled canvas_oop_rasterization: enabled_on direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok skia_graphite: disabled_off video_decode: enabled video_encode: enabled webgl: enabled webgl2: enabled webgpu: enabled
Load (avg)	2, 2, 3
Memory (System)	16.00GB (0.70GB free)
Process Argv	--crash-reporter-id fa627f66-1463-482a-bd30-f583aa38e810
Screen Reader	no
VM	0%

Extension	Author (truncated)	Version
monokai-charcoal-high-contrast	74t	3.4.0
go-outliner	766	0.1.21
pug	ama	1.0.1
preview-pdf	ana	1.0.0
alignment	ann	0.3.0
markdown-preview-github-styles	bie	2.0.3
vscode-tailwindcss	bra	0.10.5
cyber77-vscode	Cod	0.0.21
nuxt-vscode	cpr	0.0.6
language-postcss	cpy	1.1.0
dbclient-jdbc	cwe	1.3.4
vscode-mysql-client2	cwe	7.0.9
vscode-eslint	dba	2.4.4
pug-formatter	duc	0.6.0
gitlens	eam	14.8.2
EditorConfig	Edi	0.16.4
vsc-material-theme	Equ	34.3.1
vsc-material-theme-icons	equ	3.5.0
prettier-vscode	esb	10.1.0
copilot	Git	1.172.0
copilot-chat	Git	0.13.0
vscode-github-actions	git	0.26.2
vscode-pull-request-github	Git	0.82.0
go	gol	0.41.1
google-cloud-spanner-driver	goo	0.4.1
cloudcode	goo	2.5.0
terraform	has	2.29.4
vscode-position	jtr	1.1.2
vsc-python-indent	Kev	1.18.0
nodejs-repl	los	0.5.15
dotenv	mik	1.0.1
vscode-docker	ms-	1.29.0
vscode-kubernetes-tools	ms-	1.3.15
debugpy	ms-	2024.2.0
isort	ms-	2023.10.1
python	ms-	2024.2.1
vscode-pylance	ms-	2024.2.3
jupyter	ms-	2024.2.0
jupyter-keymap	ms-	1.1.2
jupyter-renderers	ms-	1.0.17
vscode-jupyter-cell-tags	ms-	0.1.8
vscode-jupyter-slideshow	ms-	0.1.5
remote-containers	ms-	0.348.0
cpptools	ms-	1.19.5
makefile-tools	ms-	0.8.22
vscode-typescript-next	ms-	5.5.20240304
vsliveshare	ms-	1.0.5918
go-doc	msy	1.0.1
sqltools	mtx	0.28.1
autodocstring	njp	0.6.1
vscode-versionlens	pfl	1.9.2
material-icon-theme	PKi	4.34.0
polacode	pnp	0.3.4
fabric8-analytics	red	0.9.2
java	red	1.28.1
vscode-xml	red	0.26.1
vscode-yaml	red	1.14.0
format-code-action	roh	0.1.0
vscode-scss-formatter	sib	3.0.0
vscode-stylelint	sty	1.3.0
even-better-toml	tam	0.19.2
intellicode-api-usage-examples	Vis	0.2.8
vscodeintellicode	Vis	1.2.30
vscode-java-debug	vsc	0.56.2
vscode-java-dependency	vsc	0.23.5
vscode-java-pack	vsc	0.25.15
vscode-java-test	vsc	0.40.1
vscode-maven	vsc	0.44.0
vscode-icons	vsc	12.7.0
volar	Vue	1.8.27
jinja	who	0.0.8
markdown-all-in-one	yzh	3.6.2
vscode-proto3	zxh	0.5.5

[VividLemon]

I had a similar problem but noticed a difference between a new project and my existing project. I had followed the direction from the extension to enable the builtin vscode TS server, and remove the deprecated Vue extensions. I then had the same problems as described. I then tried a new project, and it worked fine. I had then noticed a difference between the two environments, my project was using tsconfig.node.json when viewing Vue files, whereas the new project used tsconfig.app.json. I then tried removing some values from the tsconfig.node.json include array. Once the app tsconfig had taken over everything had started working again. The problematic include I had was components.d.ts from unplugin-vue-components. This was likely included as an accident for the node tsconfig. Perhaps it may be worth viewing which tsconfig is being loaded in the given context.

Once I had removed the problematic include element, it started using tsconfig.app.json again. Once that tsconfig took over, my problems had ceased.

Things I had done:

Updated

package.json

- "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
+ "type-check": "vue-tsc --build --force",

- "vue-tsc": "^1.8.27"
+ "vue-tsc": "^2.0.5"

tsconfig.app.json

+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

tsconfig.node.json

+ "noEmit": true,
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "module": "ESNext",
+ "moduleResolution": "Bundler",
- include: ["components.d.*"] // Not the entire include, just that value

tsconfig.vitest.json -- not that it matters much in this context

+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",

Note: most of my dependencies are at their latest version, "@vue/tsconfig": "~0.5.1", "typescript": "^5.3.3", "vite": "^5.0.12", etc etc

[jonasclement]

It seems normal to me. What does the error look like in your screen? Sharing your system info (use the Help: About command) and extension list (Execute Help: Report Issue... >> Click "show" at Include my enabled extensions) may help reproduce the problem.

Yes, like I said in the original issue, unfortunately the errors don't occur in my attempt at a repro. Our issue seems to be fixed in 2.0.6, though!

In case the information is still useful, here is an example of the error in our real repo:

As you can see, any aliased imports are failing, while imports from modules aren't.

System info:

CPUs | Apple M1 Pro (8 x 24)
-- | --
GPU Status | 2d_canvas: enabled canvas_oop_rasterization: enabled_on direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok skia_graphite: disabled_off video_decode: enabled video_encode: enabled webgl: enabled webgl2: enabled webgpu: enabled
Load (avg) | 1, 11, 11
Memory (System) | 16.00GB (0.24GB free)
Process Argv |  
Screen Reader | no
VM | 0%

Remote | SSH: [redacted hostname]
-- | --
OS | Linux x64 4.19.0-26-amd64
CPUs | Intel(R) Xeon(R) E-2224 CPU @ 3.40GHz (4 x 4200)
Memory (System) | 62.76GB (36.70GB free)
VM | 0%

Extensions:

Extension | Author (truncated) | Version
-- | -- | --
auto-close-tag | for | 0.5.15
auto-rename-tag | for | 0.1.10
remotehub | Git | 0.62.0
stylelint-disable-snippets | hed | 1.0.3
mysql-syntax | jak | 1.3.1
vscode-peacock | joh | 4.2.2
latte | Kas | 0.18.0
dotenv | mik | 1.0.1
remote-ssh | ms- | 0.109.0
remote-ssh-edit | ms- | 0.86.0
azure-repos | ms- | 0.38.0
remote-explorer | ms- | 0.4.3
remote-repositories | ms- | 0.40.0
twig-language | Old | 0.10.2
pdf | tom | 1.2.2
twig | wha | 1.0.2
codesnap | adp | 1.3.4
vs-phpcompanion | bla | 2.2.0
vscode-intelephense-client | bme | 1.10.2
npm-intellisense | chr | 1.4.5
php-namespace-resolver | ctf | 0.5.3
vscode-eslint | dba | 2.4.4
index-generator | dec | 2.1.0
gitlens | eam | 14.9.0
vscode-html-css | ecm | 2.0.9
EditorConfig | Edi | 0.16.4
prettier-vscode | esb | 10.1.0
copilot | Git | 1.172.0
copilot-chat | Git | 0.13.0
gitlab-workflow | Git | 4.7.0
todo-tree | Gru | 0.0.226
vscode-graphviz | joa | 0.0.9
i18n-ally | lok | 2.12.0
string-manipulation | mar | 0.5.7
phpstorm-parameter-hints-in-vscode | MrC | 1.2.0
vsliveshare | ms- | 1.0.5918
gremlins | nho | 0.26.0
indent-rainbow | ode | 8.3.1
vscode-yaml | red | 1.14.0
px-to-rem | sai | 1.3.1
phpcs | she | 1.0.8
addDocComments | ste | 0.0.8
code-spell-checker | str | 3.0.1
code-spell-checker-danish | str | 2.2.1
vscode-stylelint | sty | 1.3.0
php-imports | tar | 0.6.0
copy-paste-git-branch | tnr | 0.0.3
lorem-ipsum | Tyr | 1.3.1
volar | Vue | 2.0.5
php-debug | xde | 1.34.0
php-pack | xde | 1.0.3
html-css-class-completion | Zig | 1.20.0

[patroza]

versions after 2.0.6 are bugged again for us though

update: my issue was related to having to set the hybrid mode to true.