Vue server crashed after upgrading to v2.0.21 in VSCode + Nuxt 3

[haoliangwu]

Vue - Official extension or vue-tsc version

2.0.21

VSCode version

1.90.0

Vue version

3.4.27

TypeScript version

5.4.5

System Info

System:
    OS: macOS 14.5
    CPU: (8) arm64 Apple M3
    Memory: 112.33 MB / 24.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
    pnpm: 9.1.4 - ~/.nvm/versions/node/v20.12.2/bin/pnpm
  Browsers:
    Chrome: 125.0.6422.142
    Safari: 17.5

Steps to reproduce

just install the plugin and open a file with .vue extension.

Link to minimal reproduction

No response

Any additional comments?

• I have searched several issues about this topic, non of existed solutions works.
• the current project is based on nuxt 3, but it use options API rather than composable API, because it is a migration project between nuxt 2 to nuxt 3.
• I try to find a version works as expected by degrade the version(eg: v2.0.6), unluckily, non of 2.x version works. anyway, the plugin show a different error message like: '[Vue Named Pipe Client] No server found for <the path to the .vue file> ' instead of crashing directly.
• I found a method to prevent the latest plugin to crash is removing all lang="jsx" attr in codebase, anyway, the method cannot make sense, because we actually use jsx in codebase.
• On the other hand, I found the plugin of v1.8.27 works well of my codebase, so if this issue will be closed with won't fix, it is okay for me or others like me met similar issue.

[haoliangwu]

the screenshot of crashing:

[davidmatter]

Please provide a more complete reproduction than just install the plugin and open a file with .vue extension.
You can find a good example here #4457

[so1ve]

Agreed. And the screenshot doesn't provide any useful information since the code is optimized, you'd better copy the whole error log then upload as a file.

[honking]

I have the same problem, here is the log from output

Error: [UriError]: If a URI contains an authority component, then the path component must either be empty or begin with a slash ("/") character
at p (/root/.vscode-server/extensions/vue.volar-2.0.21/dist/server.js:3:22193)
at new f (/root/.vscode-server/extensions/vue.volar-2.0.21/dist/server.js:3:23300)
at new k (/root/.vscode-server/extensions/vue.volar-2.0.21/dist/server.js:3:24396)
at f.from (/root/.vscode-server/extensions/vue.volar-2.0.21/dist/server.js:3:24092)
at Object.n [as asUri] (/root/.vscode-server/extensions/vue.volar-2.0.21/dist/server.js:76:10682)
at f (/root/.vscode-server/extensions/vue.volar-2.0.21/dist/server.js:76:1286)
at Object.d [as getModifiedTime] (/root/.vscode-server/extensions/vue.volar-2.0.21/dist/server.js:76:1064)
at /root/.vscode-server/extensions/vue.volar-2.0.21/dist/server.js:76:5648
at Object.get (/root/.vscode-server/extensions/vue.volar-2.0.21/dist/server.js:3:10434)
at x (/root/.vscode-server/extensions/vue.volar-2.0.21/dist/server.js:355:16489)

Node.js v18.18.2
[Error - 16:43:37] Server process exited with code 1.
[Error - 16:43:37] The Vue server crashed 5 times in the last 3 minutes. The server will not be restarted. See the output for more information.

[davidmatter]

Which vscode version are you on? Node v18.18 doesn't sound right. Also, please write how to reproduce this, add your extension list, the platform, vscode version etc.

[sdr0x07b6]

I'm having trouble with the same crash.

I don't know how to reproduce it. I mostly work with Nuxt3 projects, and when I open some of my projects, some reproduce and some don't. Just opening them reproduces the problem. There are no specific steps to reproduce it.

All the projects that I can notice that reproduce the problem are work products, so I can't share them.

I just tried creating a new project using Nuxt latest, but that didn't reproduce it.

• macOS 14.5

• VSCode
  

Version: 1.90.0 (Universal)
Commit: 89de5a8d4d6205e5b11647eb6a74844ca23d2573
Datetime: 2024-06-04T19:34:44.157Z
Electron: 29.4.0
ElectronBuildId: 9593362
Chromium: 122.0.6261.156
Node.js: 20.9.0
V8: 12.2.281.27-electron.0
OS: Darwin arm64 23.5.0

• extensions

% code --list-extensions
aaron-bond.better-comments
abierbaum.vscode-file-peek
alefragnani.bookmarks
alefragnani.project-manager
amoosbr.markdown-imsize
andyyaldoo.vscode-json
arcticicestudio.nord-visual-studio-code
ariassd.terminal-loader
austenc.tailwind-docs
bierner.github-markdown-preview
bierner.markdown-checkbox
bierner.markdown-emoji
bierner.markdown-footnotes
bierner.markdown-mermaid
bierner.markdown-preview-github-styles
bierner.markdown-yaml-preamble
bmewburn.vscode-intelephense-client
bradlc.vscode-tailwindcss
christian-kohler.path-intellisense
cipchk.cssrem
csstools.postcss
dariofuzinato.vue-peek
dart-code.dart-code
dnlytras.nord-wave
eamodio.gitlens
ecmel.vscode-html-css
emallin.phpunit
emmanuelbeziat.vscode-great-icons
eriklynd.json-tools
esbenp.prettier-vscode
fabiospampinato.vscode-todo-plus
formulahendry.auto-rename-tag
formulahendry.code-runner
github.copilot
github.copilot-chat
github.vscode-pull-request-github
grapecity.gc-excelviewer
graphql.vscode-graphql
graphql.vscode-graphql-syntax
heybourn.headwind
humao.rest-client
idleberg.applescript
ivhernandez.vscode-plist
jebbs.markdown-extended
jkchao.hy-theme
kisstkondoros.vscode-gutter-preview
kumar-harsh.graphql-for-vscode
leighlondon.eml
lokalise.i18n-ally
mansoorkhan96.php-cs-fixer
mattn.runner
mechatroner.rainbow-csv
moshfeu.compare-folders
mrmlnc.vscode-json5
mrmlnc.vscode-pugbeautify
mrmlnc.vscode-scss
ms-ceintl.vscode-language-pack-ja
ms-vscode.vscode-speech
mushan.vscode-paste-image
neilbrayfield.php-docblocker
patricklee.vsnotes
petermekhaeil.vscode-tailwindcss-explorer
prisma.prisma
redhat.vscode-yaml
rexshi.phpdoc-comment-vscode-plugin
rust-lang.rust-analyzer
saikou9901.evilinspector
satokaz.vscode-markdown-header-coloring
shardulm94.trailing-spaces
shd101wyy.markdown-preview-enhanced
simonsiefke.svg-preview
sleistner.vscode-fileutils
spywhere.mark-jump
streetsidesoftware.code-spell-checker
styled-components.vscode-styled-components
stylelint.vscode-stylelint
sysoev.language-stylus
tamasfe.even-better-toml
tauri-apps.tauri-vscode
tldraw-org.tldraw-vscode
tommyme.bookmarkx
tomoki1207.pdf
usernamehw.errorlens
vitest.explorer
vncz.vscode-apielements
vue.volar
vuetifyjs.vuetify-vscode
wallabyjs.console-ninja
xueshiqiao.avprobe
yamenarahman.nord-extra-dark
yzhang.markdown-all-in-one
zhouronghui.propertylist
zignd.html-css-class-completion

[davidmatter]

Thanks for the detailed information. Please try to create a new (empty) profile in vscode and activate only the volar extension to see if the problem persists without all those other extensions.

[sdr0x07b6]

@davidmatter

activate only the volar extension

Didn't reproduce.

I enabled and disabled each of the many extensions I had installed, while repeatedly restarting the extension host.
In the end, I found that disabling just this one while still enabling all of the extensions made the issue disappear...!

vscode-styled-components
https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components

% code --list-extensions --show-versions | grep styled
styled-components.vscode-styled-components@1.7.8

As I mentioned, there are no specific steps to reproduce the issue, and in my environment, whenever I open a project or restart the extension host, it crashes after 11 seconds.
This was resolved by disabling vscode-styled-components.

However, this should not be taken as a solution to the problem, but rather the conflict should be improved.
The most recent update for Vue - Official was 2024-06-08, 23:50:09. Now that you mention it, the problem has been occurring for a few days, so it seems likely that the difference included in this update is the cause.

[so1ve]

Could you please show this tab:

You'd better set hybridMode to auto to avoid compatibility issues.

[sdr0x07b6]

@so1ve Thanks for the message.

First, here is the message you see when vscode-styled-components is enabled.

書式設定拡張機能 'Vue - Official' はフォーマッタとして構成されていますが、'vue'-ファイルをフォーマットできません

This is what the Japanese message means.

The formatting extension 'Vue - Official' is configured as the formatter but is unable to format 'vue'-files

When I opened the configuration link “構成...”, a list with only one option, "Prettier", appeared, and I had no choice but to choose it, so I chose it without really understanding what to do.
Then the above Japanese message disappeared. However, the problem did not improve.

Next, here is the message when vscode-styled-components is disabled.

In Hybrid Mode, it's always Auto from the start, whether there's a problem or not.

Both are set to Auto, but I found that they are only disabled when there is a problem, so I tried forcing them to true in the settings. Then the problem did not occur again!

However, I don't understand what this means.
Also, are there any disadvantages to forcing Hybrid Mode to always be set to true?

To begin with, there were no problems until the other day, but this issue occurred around the same time as the Vue - Official update. Is it the right solution to always keep it set to true?

[sdr0x07b6]

Also, there was an update to VSCode v1.90.1 today, but updating it did not change the situation.

[so1ve]

Forcing Hybrid Mode to always be set to true will make language tools crash when there is other extensions that uses a ts plugin enabled, so we'd better left it to auto to keep best compatibility. But sry I have no idea about the crash :(

[jagoncalves14]

@haoliangwu, I was having the same problem as you.

However, the most recent update of Vue - Official (v2.0.22) seems to have solved the issue.

[sdr0x07b6]

@jagoncalves14 Thanks for letting everyone know!

The issue no longer occurs even when vscode-styled-components is enabled.