`on` not detected as used variable (Vue 2)

[Shinigami92]

Problem

Upgraded project dependencies and suddenly on is detected as not used.

But following code is and was totally valid Vue 2 code

<template lang="pug">
v-tooltip(bottom)
  template(v-slot:activator="{ on, attrs }")
    v-btn(v-on="on", v-bind="attrs", icon, @click="toggleDark")
      //- ~~~~~~^^~ it's used here
      v-icon(v-if="isDark") mdi-weather-night
      v-icon(v-else) mdi-weather-sunny
  span(v-if="isDark") Switch to Lightmode
  span(v-else) Switch to Darkmode
</template>

<script lang="ts" src="./DarkModeSwitcher"></script>

Workaround

setting compilerOptions.noUnusedLocals to false

Due to this company project(s) are team projects with some Java backend/fullstack developers I would really like to not disable this setting.

Logs

$ vue-tsc --noEmit && vite build
src/components/DarkModeSwitcher/DarkModeSwitcher.vue:3:32 - error TS6133: 'on' is declared but its value is never read.

3   template(v-slot:activator="{ on, attrs }")
                                 ~~

src/components/Layout/Footer/Footer.vue:4:34 - error TS6133: 'on' is declared but its value is never read.

4     template(v-slot:activator="{ on, attrs }")
                                   ~~

src/components/PortalValidationMessageCard/PortalValidationMessageCard.vue:3:30 - error TS6133: 'on' is declared but its value is never read.

3   template(v-slot:activator="{ on }")
                               ~~~~~~

src/components/HttpStatusChip/HttpStatusChip.vue:4:34 - error TS6133: 'on' is declared but its value is never read.

4     template(v-slot:activator="{ on, attrs }")
                                   ~~

src/components/DataTable/FilterChip/FilterChip.vue:4:34 - error TS6133: 'on' is declared but its value is never read.

4     template(v-slot:activator="{ on, attrs }")
                                   ~~

src/components/PortalAutocomplete/PortalAutocomplete.vue:18:36 - error TS6133: 'on' is declared but its value is never read.

18       template(v-slot:activator="{ on, attrs }")
                                      ~~

src/components/Jobs/CreateJobForm/CreateJobForm.vue:11:42 - error TS6133: 'on' is declared but its value is never read.

11             template(v-slot:activator="{ on, attrs }")
                                            ~~

src/components/Layout/Footer/Footer.vue:19:34 - error TS6133: 'on' is declared but its value is never read.

19     template(v-slot:activator="{ on, attrs }")
                                    ~~

src/components/Layout/Navigation/Navigation.vue:25:38 - error TS6133: 'on' is declared but its value is never read.

25         template(v-slot:activator="{ on, attrs }")
                                        ~~

src/views/GetPageFeature/GetPageFeature.vue:24:54 - error TS6133: 'on' is declared but its value is never read.

24                         template(v-slot:activator="{ on, attrs }")
                                                        ~~

src/views/Jobs/Overview/Overview.vue:38:42 - error TS6133: 'on' is declared but its value is never read.

38               template(v-slot:activator="{ on }")
                                            ~~~~~~

src/views/Jobs/Overview/Overview.vue:43:42 - error TS6133: 'on' is declared but its value is never read.

43               template(v-slot:activator="{ on }")
                                            ~~~~~~

src/views/GetPageFeature/GetPageFeature.vue:43:51 - error TS6133: 'on' is declared but its value is never read.

43                     template(v-slot:item="{ item, on, attrs }")
                                                     ~~

src/components/PageFeaturesTable/PageFeaturesTable.vue:53:38 - error TS6133: 'on' is declared but its value is never read.

53         template(v-slot:activator="{ on, attrs }")
                                        ~~

src/views/GetPageFeature/GetPageFeature.vue:50:58 - error TS6133: 'on' is declared but its value is never read.

50                             template(v-slot:activator="{ on, attrs }")
                                                            ~~

src/views/GetPageFeature/GetPageFeature.vue:55:58 - error TS6133: 'on' is declared but its value is never read.

55                             template(v-slot:activator="{ on, attrs }")
                                                            ~~

src/views/GetPageFeature/GetPageFeature.vue:61:54 - error TS6133: 'on' is declared but its value is never read.

61                         template(v-slot:activator="{ on, attrs }")
                                                        ~~

Found 17 errors.

Extracted from https://github.com/johnsoncodehk/vue-tsc/issues/65#issuecomment-910368779

[Shinigami92]

Downgrading just from vue-tsc 0.3.0 to last used version 0.2.3 does NOT solve this issue! So I assume a sub-dependency is the problem 🤔

[Shinigami92]

Trying to play around with some dependencies and forcing vscode-vue-languageservice to the previously stable version

// ...
{
  "vue-tsc": "0.2.3"
},
"resolutions": {
  "vscode-vue-languageservice": "0.27.0"
}

results in an error 😔

$ /Users/christopher/adSoul/productcount-crawler/frontend/node_modules/.bin/vue-tsc --noEmit
/Users/christopher/adSoul/productcount-crawler/frontend/node_modules/vscode-vue-languageservice/out/use/useSfcScriptGen.js:31
                : script.value && script.value.lang !== 'js' ? shared.getValidScriptSyntax(script.value.lang)
                                                                      ^

TypeError: shared.getValidScriptSyntax is not a function
    at ReactiveEffect.fn (/Users/christopher/adSoul/productcount-crawler/frontend/node_modules/vscode-vue-languageservice/out/use/useSfcScriptGen.js:31:71)
    at ReactiveEffect.run (/Users/christopher/adSoul/productcount-crawler/frontend/node_modules/@vue/reactivity/dist/reactivity.cjs.js:164:29)
    at ComputedRefImpl.get value [as value] (/Users/christopher/adSoul/productcount-crawler/frontend/node_modules/@vue/reactivity/dist/reactivity.cjs.js:1076:39)
    at ReactiveEffect.fn (/Users/christopher/adSoul/productcount-crawler/frontend/node_modules/vscode-vue-languageservice/out/use/useSfcTemplateScript.js:32:24)
    at ReactiveEffect.run (/Users/christopher/adSoul/productcount-crawler/frontend/node_modules/@vue/reactivity/dist/reactivity.cjs.js:164:29)
    at ComputedRefImpl.get value [as value] (/Users/christopher/adSoul/productcount-crawler/frontend/node_modules/@vue/reactivity/dist/reactivity.cjs.js:1076:39)
    at Object.update (/Users/christopher/adSoul/productcount-crawler/frontend/node_modules/vscode-vue-languageservice/out/use/useSfcTemplateScript.js:279:25)
    at update (/Users/christopher/adSoul/productcount-crawler/frontend/node_modules/vscode-vue-languageservice/out/sourceFile.js:195:27)
    at Object.createSourceFile (/Users/christopher/adSoul/productcount-crawler/frontend/node_modules/vscode-vue-languageservice/out/sourceFile.js:126:5)
    at updateSourceFiles (/Users/christopher/adSoul/productcount-crawler/frontend/node_modules/vscode-vue-languageservice/out/languageService.js:535:51)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I'm not quite sure which sub-sub-dependency I now need to force to pin to a version 🤔

[Shinigami92]

I'm not sure which of these dependencies is the evil one, but following package.json (using yarn) solves it and brings back the old/stable behaviour

  // ...
    "vue-tsc": "~0.3.0"
  },
  "resolutions": {
    "@volar/code-gen": "0.27.7",
    "@volar/shared": "0.27.7",
    "@volar/source-map": "0.27.7",
    "@volar/transforms": "0.27.7",
    "vscode-vue-languageservice": "0.27.7"
  }

I will stick to these versions for now until the issue(s) are fixed, because it is a more suitable solution for our team instead of disabling noUnusedLocals

[Shinigami92]

Could you ping me when it is released? Then I can test and report back 🙂

[johnsoncodehk]

Try vscode-vue-languageservice@alpha (0.27.12-alpha.2) for now.

[Shinigami92]

Okay, can confirm that this is fixed now 🎉

As always thx for your work 💚

But I will try to create a repro for the other bug(s) and think will open another issue for the many error TS2304: Cannot find name 'xxx'. maybe today, maybe later. depends on my workload 😅