VUE Language Server crashed 5 times in the last 3 minutes

[susanne99]

• [x] I have searched through existing issues
• [x] I have read through docs
• [x] I have read FAQ
• [x] I have tried restarting VS Code or running Vetur: Restart VLS

Info

• Platform: Windows_NT x64 10.0.19043
• Vetur version: 0.36.0
• VS Code version: 1.71.0, Electron: 19.0.12, Chromium: 102.0.5005.167
• Node.js: 16.14.2

Problem

The errror occurs on some .vue files, not on all. I have no idea what the reason is, i tried almost everything: i reduced step by step the code of such a failed .vue file, but the vls server restart takes a long time, which makes the error investigation very heavy ! I checked the folder structure, e.g. same file name like folder name (maybe this creates end endless loop), i renamed, copied files and so on - nothing helped !! Vetur is a very important tool for me, and I and other developer need it really for developing stable software. Maybe is "VOLAR" the right plugin, but my program exists since 3 years (VUE2 with about 100 files), and i don't want to change it like VOLAR spec. I reinstalled also VETUR, no success

Vetur initialized [INFO ] Loaded bundled [email protected]. [INFO ] Loaded bundled prettier. [INFO ] Loaded bundled @starptech/prettyhtml. [INFO ] Loaded bundled prettier-eslint. [INFO ] Loaded bundled prettier-tslint. [INFO ] Loaded bundled stylus-supremacy. [INFO ] Loaded bundled @prettier/plugin-pug. [Error - 06:47:41] Request textDocument/semanticTokens/range failed. Message: Request textDocument/semanticTokens/range failed with message: Maximum call stack size exceeded Code: -32603 c:\Users\Wolfgang.vscode\extensions\octref.vetur-0.36.0\server\node_modules\typescript\lib\typescript.js:60473 function getObjectTypeInstantiation(type, mapper, aliasSymbol, aliasTypeArguments) { ^

RangeError: Maximum call stack size exceeded at getObjectTypeInstantiation (c:\Users\Wolfgang.vscode\extensions\octref.vetur-0.36.0\server\node_modules\typescript\lib\typescript.js:60473:44) at instantiateTypeWorker (c:\Users\Wolfgang.vscode\extensions\octref.vetur-0.36.0\server\node_modules\typescript\lib\typescript.js:60736:28) at instantiateTypeWithAlias (c:\Users\Wolfgang.vscode\extensions\octref.vetur-0.36.0\server\node_modules\typescript\lib\typescript.js:60716:26) at instantiateType (c:\Users\Wolfgang.vscode\extensions\octref.vetur-0.36.0\server\node_modules\typescript\lib\typescript.js:60699:37) at instantiateList (c:\Users\Wolfgang.vscode\extensions\octref.vetur-0.36.0\server\node_modules\typescript\lib\typescript.js:60323:34)

Reproducible Case

Not Reproducable

My Package.json

{
    "name": "xxx",
    "version": "1.0.0",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve ",
        "dev": "vue-cli-service build --mode development",
        "netcup": "vue-cli-service build --mode netcup",
        "xampp": "vue-cli-service build --mode xampp",
        "lint": "vue-cli-service lint --no-fix"
    },
    "devDependencies": {
        "@types/crypto-js": "4.1.1",
        "@types/d3": "^7.1.0",
        "@types/lodash": "^4.14.178",
        "@types/vue2-datepicker": "^3.3.1",
        "@types/vuelidate": "^0.7.15",
        "@typescript-eslint/eslint-plugin": "^5.33.1",
        "@typescript-eslint/parser": "^5.33.1",
        "@vue/eslint-config-typescript": "^11.0.0",
        "axios": "^0.21.1",
        "bootstrap": "^4.6.0",
        "cross-env": "^7.0.3",
        "eslint": "^8.22.0",
        "eslint-plugin-vue": "^9.3.0",
        "jquery": "^3.6.0",
        "lodash": "^4.17.21",
        "popper.js": "^1.12",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.8",
        "sass-loader": "^10.1.1",
        "typescript": "~4.1.5",
        "vue": "^2.6.12",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^6.1.1",
        "@fortawesome/free-brands-svg-icons": "^6.1.1",
        "@fortawesome/free-regular-svg-icons": "^6.1.1",
        "@fortawesome/free-solid-svg-icons": "^6.1.1",
        "@fortawesome/vue-fontawesome": "^2.0.6",
        "@fullcalendar/bootstrap": "^5.6.0",
        "@fullcalendar/core": "^5.6.0",
        "@fullcalendar/daygrid": "^5.6.0",
        "@fullcalendar/google-calendar": "^5.6.0",
        "@fullcalendar/interaction": "^5.6.0",
        "@fullcalendar/list": "^5.6.0",
        "@fullcalendar/resource-common": "^5.6.0",
        "@fullcalendar/resource-daygrid": "^5.6.0",
        "@fullcalendar/resource-timeline": "^5.6.0",
        "@fullcalendar/rrule": "^5.6.0",
        "@fullcalendar/timegrid": "^5.6.0",
        "@fullcalendar/timeline": "^5.6.0",
        "@fullcalendar/vue": "^5.6.0",
        "@vue/cli-plugin-eslint": "^5.0.8",
        "@vue/cli-plugin-typescript": "^5.0.4",
        "@vue/cli-service": "^5.0.4",
        "bootstrap-vue": "^2.21.2",
        "crypto-js": "^4.1.1",
        "d3": "^6.6.2",
        "rrule": "^2.6.8",
        "vue-axios": "^3.2.4",
        "vue-bootstrap-typeahead": "^0.2.6",
        "vue-context": "^6.0.0",
        "vue-i18n": "^8.26.7",
        "vue-moment": "^4.1.0",
        "vue-router": "^3.5.1",
        "vue-swatches": "^2.1.1",
        "vue-unique-id": "^3.2.0",
        "vue2-datepicker": "^3.9.0",
        "vuelidate": "^0.7.6",
        "vuex": "^3.6.2"
    }
}

[Cyclodex]

This happens to me when I upgrade Typescript from 4.7.x (4.7.4) to 4.8.x (4.8.3)

No idea if it has anything to do that I am using "vue-property-decorator" to write my components.

[susanne99]

i use VUE2 with typescript, and i wrote all my componennts for example like this:

<script lang="ts">

import Vue, { PropType } from 'vue'
import { mapState, mapActions, mapGetters } from 'vuex'

import savebuttongroup from '../Common/SaveButtonGroup.vue'

interface iformdata {
    id: number;
    to: string;
    cc: string;  
}
export default Vue.extend({
    name: 'email_edit',

    components: { savebuttongroup },

    props: {
        title: String,
    },
});
</script>

so, what i tried for the example component above, i remove the "savebuttongroup" from "components" property, like this: components: { },

and vola, the VLS (vue language server) restarts without error. okay, then we can say, the bug is in the component "savebuttongroup" - i removed all typescript code, all watchers, all "template-code", i made an almost empty "savebuttongroup" component - but the VLS error still occurs. Therefore, i have no idea anymore, what the problem is.

for myself, i think it has maybe nothing to do with the vetur itself, because i installed a 1 year old vetur version, and the error is the same. I think it has todo with VSCode Version.

What i not really understand is, that not more people have this problem !

Please, Vetur Team, HELP, without the VLS Server it is not really fine to develop vue app's.

[Cyclodex]

@susanne99 which Typescript version are you running?

Please check in vs code:

• go into a TS file (*.ts)
• (command palette) CTRL+SHIFT+P : "Select Typescript version"
• Check if you are using workspace or vs code version, and which version it is

[susanne99]

Hi Cyclodex, thanks for your helping!

tsconfig.json:

{
  "compilerOptions": {
    "allowJs": false,
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },

    "include": [
        "src/**/*.ts",
        "src/**/*.tsx",
        "src/**/*.vue",
        "tests/**/*.ts",
        "tests/**/*.tsx"
    ],

    "exclude": [
        "node_modules",
        "vendor"
  ]
}

"Select Typescript Version":

I use VSCode Version: 4.8.2
I don't use Workspace Version: 4.1.6

I tried to use the workspace Version - the problem still exists

[susanne99]

I can't imagine that nobody has this problem

I mean, a recursion error with max. call stack size exceeded cannot only effect me.

.vscode\extensions\octref.vetur-0.36.0\server\node_modules\typescript\lib\typescript.js:60715 function instantiateTypeWorker(type, mapper, aliasSymbol, aliasTypeArguments) { ^

RangeError: Maximum call stack size exceeded at instantiateTypeWorker (c:\Users\Wolfgang.vscode\extensions\octref.vetur-0.36.0\server\node_modules\typescript\lib\typescript.js:60715:39) at instantiateTypeWithAlias (c:\Users\Wolfgang.vscode\extensions\octref.vetur-0.36.0\server\node_modules\typescript\lib\typescript.js:60711:26) at instantiateType (c:\Users\Wolfgang.vscode\extensions\octref.vetur-0.36.0\server\node_modules\typescript\lib\typescript.js:60694:37)

[AhmadJavaidWork]

I was facing the same problem in one of my nuxt projects (We will call this X project). Luckily I had other nuxt projects in my computer in which Vetur was working perfectly fine.

After digging a lot and wasting a lot of time on this issue. Some how I came to know that X project had vue v2.7.13 in package-lock.json and other projects had vue v2.6.12. So I copy and pasted package-lock.json from another nuxt project into X project's package-lock.json removed node_modules, ran npm i and then the issue was resolved and Vetur started working perfectly fine.

My guess is I might had different vue versions across different dependencies.

Please have a look at this and verify your project's package-lock.json

Thanks.

[susanne99]

hi,

 

thanks fpr the tip !

meanwhile i stopped the investigation and use from now on volar.

it works, but sometimes (very little) i monitored also a stack overflow error - then i restart VS-Code and the error has gone !

 

the general problem is,

each provider has its own system, e.g. typescript translator, you can use the one from VSCode or the one from VUE or a third party, and so on

 

kind regards

   

Gesendet: Samstag, 22. Oktober 2022 um 14:58 Uhr Von: "Ahmad Javaid" @.> An: "vuejs/vetur" @.> Cc: "susanne99" @.>, "Mention" @.> Betreff: Re: [vuejs/vetur] VUE Language Server crashed 5 times in the last 3 minutes (Issue #3520)

 

I was facing the same problem in one of my nuxt projects (We will call this X project). Luckily I had other nuxt projects in my computer in which Vetur was working perfectly fine.

After digging a lot and wasting a lot of time on this issue. Some how I came to know that X project had vue v2.7.13 in package-lock.json and other projects had vue v2.6.12. So I copy and pasted package-lock.json from another nuxt project into X project's package-lock.json remove node_modules, ran npm i and then the issue was resolved and Vetur started working perfectly fine.

My guess is I might had different vue versions across different dependencies.

Please have a look at this and verify your project's package-lock.json

Thanks.

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

[yoyo930021]

Vetur is broken in typescript 4.8. I will fix it.

[platformlead]

 Hey @susanne99  I have almost exactly the same issue as you do, after a lengthy investigation  found that  if I removed
"@types/vuelidate": "^0.7.15",  the range error maximum callstack size exceeded no longer happens. 

I got declaration missing and other expected validation errors in components where vuelidate is present, which is  in the dozens of places for me , but the build does not fail.  it will take some time to make the update but hopefully thats is it. 

Suggestion:  

Try  updating vuelidate to @vuelidate/core  v2.0.0 
https://vuelidate-next.netlify.app/   after that update vue-template-compiler to 2.7.14

[DdZ-Fred]

@platformlead Thanks for your comment, our app is also using vuelidate and removing its types package solved everything!