vue-class-component: Does not work with Vue 2.5.18

Just create a new project with Vue CLI and you get a

35:1 Unable to resolve signature of class decorator when called as an expression.
  Type '<VC extends VueClass<Vue>>(target: VC) => VC' is missing the following properties from type 'typeof HelloWorld': exte
nd, nextTick, set, delete, and 7 more.
    33 | import { Component, Prop, Vue } from 'vue-property-decorator';
    34 |
  > 35 | @Component
       | ^
    36 | export default class HelloWorld extends Vue {
    37 |   @Prop() private msg!: string;
    38 | }

This happens since the update of Vue and vue-template-compiler to version 2.5.18. With 2.5.17 everything works.

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 32
  • Comments: 19 (4 by maintainers)

Commits related to this issue

Most upvoted comments

We already figured out the cause and a patch is already created https://github.com/vuejs/vue/pull/9173 Please wait until the next patch version of Vue is released, use Vue <= 2.5.17 or configure "strictFunctionTypes": false.

I seem to be getting this issue, but I’m not using the class component pattern. Is it likely to be related? I’ve tried pulling back vue and vue-template-compiler to 2.5.17, but I’m still getting this:

TS2322: Type 'VueConstructor<{ message: string; } & Vue>' is not assignable to type 'VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | ComponentOptions<never, any, any, any, any, Record<string, any>> | AsyncComponent<any, any, any, any>'.

message is a prop of my component. The component is being included from another package, and both packages are in a Lerna monorepo. Components in the same directory work OK. I have a sfc.d.ts covering the webpack alias the component is imported under. This definition does have an effect, as the error message changes if the definition is removed and the component is imported but not used (if it is used the message is the same). By “used” I mean referenced in App.vue’s components{}.

I’ve no doubt this is the wrong place for this, but I’m at a bit of a loss. Sorry!

Edit: After looking again, this seems to be a separate error. Is there a better place to post this?

I am having the same issue. I spent the better part of three hours working on this. There is a work around go to tsconfig.json inside "compilerOptions" : {...} insert "strictFunctionTypes":false but it is kinda dangerous work around so be careful.

Type ‘VueClass’ is not assignable to type ‘typeof App’. Types of parameters ‘options’ and ‘options’ are incompatible. Type ‘ComponentOptions<Vue, DefaultData, DefaultMethods, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>> | undefined’ is not assignable to type ‘ThisTypedComponentOptionsWithArrayProps<Vue, any, any, any, any> | undefined’. Type ‘ComponentOptions<Vue, DefaultData, DefaultMethods, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>’ is not assignable to type ‘ThisTypedComponentOptionsWithArrayProps<Vue, any, any, any, any>’. Type ‘ComponentOptions<Vue, DefaultData, DefaultMethods, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>’ is not assignable to type ‘ComponentOptions<Vue, any, any, any, any[], Record<any, any>>’.

@HerringtonDarkholme @ktsn vue@2.5.19 ~~~ vue break change.

I’ve just had this issue. I tried updating vue but no avail. Tried setting strictFunctionTypes: false but that didn’t help either:

Unable to resolve signature of class decorator when called as an expression.
  Type '<VC extends VueClass<Vue>>(target: VC) => VC' is missing the following properties from type 'typeof SaveUpdateMixin': extend, nextTick, set, delete, and 7 more.ts(1238)

vue@2.6.12 vue-class-component@7.2.5

Just got hit by this. Did an update and project failed to compile anymore. Vue bootstrapping uses the new @Component/@Prop decorator syntax for the example templates and this breaks any project using it.

15:1 Unable to resolve signature of class decorator when called as an expression.
  Type '<VC extends VueClass<Vue>>(target: VC) => VC' is missing the following properties from type 'typeof HelloWorld': extend, nextTick, set, delete, and 7 more.
    13 | import { Component, Prop, Vue } from 'vue-property-decorator'
    14 |
  > 15 | @Component
       | ^
    16 | export default class HelloWorld extends Vue {
    17 |   @Prop() private msg!: string;
    18 | }

I really appreciate your work, Friends. We’ve recently moved from another well-known JS framework over to Vue/Vuetify because CLI3 supports directly TypeScript as first class citizen. In our organization management would never allow to start a project with a programming language without a strong, well-supported type system. The other framework-chain we evaluated first had a powerful type system, but it wasn’t integrated, and it was terribly slow; this was enough reason we started looking for a better solution, so we found Vue/TS/CLI3/Vuetify. The technical evaluators have to give a presentation that Vue/Vuetify with its out-of-the box support for TS (and a number of other goodies, like PWA), which came with CLI3, would be perfect for the requirements of our mobile/web business application project. When we saw how simple was to add Vuetify to a TS (sic!) project with “vue add Vuetify”, all the IT management wowed.

I’ve just found another workaround: When creating my project with CLI 3 I set NO to the question “Use class-style component syntax?”, so the problem is definitely with those nifty decorators 😃