` '$props' is declared but its value is never read.` error occurred in Vue3/TypeScript project while '$props' has not been explicitly used

Question

Vue3 component with TypeScript and vue-property-decorator:

<template lang="pug">

component.OverflowSafeSingleLineLabel(
  :is="rootElementTag"
)
  span.OverflowSafeSingleLineLabel-TextWithIncreasedLineHeight
    slot

</template>


<script lang="ts">

  import { Options, Vue, Prop as VueProperty } from "vue-property-decorator";


  @Options ({})
  export default class OverflowSafeSingleLineLabel extends Vue {

    @Prop({ type: String, default: "div" })
    protected readonly rootElementTag!: string;
  }

</script>

I have 4 TypeScript errors:

ERROR in C:\Users\XXX\Source\OverflowSafeSingleLineLabel.vue.ts
5:45-51
[tsl] ERROR in C:\Users\XXX\Source\OverflowSafeSingleLineLabel.vue.ts(5,46)
      TS6133: '$props' is declared but its value is never read.

ERROR in C:\Users\XXX\Source\OverflowSafeSingleLineLabel.vue.ts
5:57-63
[tsl] ERROR in C:\Users\XXX\Source\OverflowSafeSingleLineLabel.vue.ts(5,58)
      TS6133: '$setup' is declared but its value is never read.

ERROR in C:\Users\XXX\Source\OverflowSafeSingleLineLabel.vue.ts
5:69-74
[tsl] ERROR in C:\Users\XXX\Source\OverflowSafeSingleLineLabel.vue.ts(5,70)
      TS6133: '$data' is declared but its value is never read.

ERROR in C:\Users\XXX\Source\OverflowSafeSingleLineLabel.vue.ts
5:80-88
[tsl] ERROR in C:\Users\XXX\Source\OverflowSafeSingleLineLabel.vue.ts(5,81)
      TS6133: '$options' is declared but its value is never read.

I can't understand on what the error refers for. The line 5 is the template part. Where I declared '$props', '$setup', 'data' and '$options'?

📁 Repro repository (Well, it's not the repro, but currently there nothing except basic scaffold like package.json, Webpack config and 2 source files).

📁 ZIP with included node_modules Just run webpack to get the above erroneous output.

Answer 1

This appears to be an issue with Vue3 template code generation. There is an open issue here: https://github.com/vuejs/vue-next/issues/4668

The latest comment:

Ah, so it is a problem with Vue's codegen in the sense that it generates unused parameters sometimes - which previously wasn't an issue as the generated render function wasn't actually typechecked, but vue-tsc now does that.

so there's little for you to do, we'll have to research if/how we can improve this.

They suggest a workaround like following in tsconfig.json:

{
  "compilerOptions": {
    ...
    "noUnusedParameters": false,
}