Property 'xxx' does not exist on type 'CombinedVueInstance<Record<never, any> & Vue, object, object, object, Record<never, any>>'

[mateonunez]

• I have read FAQ
• I have searched through existing issues
• I have read through docs

Info

• Platform: Windows x64
• Vetur version: 0.26.1
• VS Code version: 1.47.3

Problem

Updating Vetur into the last release I get an error in each property in html component, computed, methods, events, etc.

Property 'styleRow' does not exist on type 'CombinedVueInstance<Record<never, any> & Vue, object, object, object, Record<never, any>>'

This is my method:

styleRow(row) {
   return `background-color: ${
     row.order && row.order.category ? row.order.category.color : '#ffffff'
   }`
}

Reproducible Case

Not reproducible by a project.

[jtsom]

Same here. Big problem...

[yoyo930021]

Please provide reproducible case.
https://github.com/vuejs/vetur/blob/master/.github/NO_REPRO_CASE.md

[jtsom]

Unfortunately, for me, I can't send along the project that is having this issue. I am trying to recreate it in a small, sample application, but the error is not showing. This error is showing for some props, some computed items and some methods. Not all, which is making it hard to track down. I would suggest, if you have several Vue apps, as I'm sure you do, open each one and see if the error appears.

A sample of the error:

The item it claims does not exist, clearly does:

BTW, this is in a Javascript application - NO Typescript is being used.

[yoyo930021]

Unfortunately, for me, I can't send along the project that is having this issue. I am trying to recreate it in a small, sample application, but the error is not showing. This error is showing for some props, some computed items and some methods. Not all, which is making it hard to track down. I would suggest, if you have several Vue apps, as I'm sure you do, open each one and see if the error appears.

A sample of the error:

The item it claims does not exist, clearly does:

BTW, this is in a Javascript application - NO Typescript is being used.

If I don't have case, debugging is too hard.
Can you reproduce the same code every time?

If yes, I think #1707 or vuejs/vue#8721 ?

[jtsom]

Unfortunately, for me, I can't send along the project that is having this issue. I am trying to recreate it in a small, sample application, but the error is not showing. This error is showing for some props, some computed items and some methods. Not all, which is making it hard to track down. I would suggest, if you have several Vue apps, as I'm sure you do, open each one and see if the error appears.
A sample of the error:

The item it claims does not exist, clearly does:

BTW, this is in a Javascript application - NO Typescript is being used.

If I don't have case, debugging is too hard.
Can you reproduce the same code every time?

If yes, I think #1707 or vuejs/vue#8721 ?

Yes in one project, no in another. Both of those issues relate to Typescript projects. Again, this is not Typescript, straight Javascript, so I cannot add type annotations.

This is the error I'm getting for one particular component:

Property 'activityType' does not exist on type 'CombinedVueInstance<{ isFunk_1: unknown; getCardsForDisplay: unknown; weekNumber: any; vowelsoundsData: any; } & { programId: string; unitId: string; weekId: string; dayId: string; } & Vue, object, object, object, Record<...>>'.

It's showing in the CombinedVueInstance my computed properties, my data properties and I assume my data properties, respectively. However, it looks like it's not recognizing the data properties ("object, object, object...") This component doesn't have any methods referenced in the HTML. Another component does have methods (click events, etc.) that are also not recognized. The CombinedVueInstance doesn't even seem to show an option for methods.

[rchl]

@jtsom you need to add annotations in JS code too. Vetur will only be able to automatically infer types for trivial things like literals and others. Anything more complicated needs annotations. And yes, you can annotate stuff in JS - use JSDoc for that. if you are not doing that then don't expect things to work flawlessly.

[rchl]

I just found this blog post that should explain it more: https://blog.usejournal.com/type-vue-without-typescript-b2b49210f0b

Any non-trivial props, data options, computed values, methods, etc. need to be annotated.

[jtsom]

That document says "We have to provide @type annotations for properties which are impossible infer statically." Except, my data properties are all simple strings, so should not need types (see above). Also, in another small application, I am not seeing this error, and the data properties are also simple types:

Not to mention, what changed in a .1 update that would cause this big change in functionality.

[rchl]

You need to know that if you are missing some annotations in other places in the Vue file, that can break type checking in that file in general.

So add all annotations where needed or simplify your file until it doesn't reproduce.

If nothing helps then create a repro as we can't be guessing forever here.

[jtsom]

How would you annotate Vuex getters? on the getter itself in the store? on the ...mapGetters( .. ) call?
Again, I have to ask, what changed in the latest update to cause all of these issues? To go through my javascript and add @type is going to be a huge task.

[yoyo930021]

It's a bug on upsteam.
The temporary solution is used JSDoc.

[jtsom]

Well, for me, temporary solution is to downgrade to the previous version until this is fixed.

[mateonunez]

I've downgraded to the 0.26.0 version and it works.

[yoyo930021]

Well, for me, temporary solution is to downgrade to the previous version until this is fixed.

You can't downgrade to fix it.
The only possible way is to install TypeScript 2.9 in project,
And set "vetur.useWorkspaceDependencies": true

[yoyo930021]

I've downgraded too to the 0.26.0 version.

If this work in v0.26.0?

[jtsom]

I downgraded to v0.26.0 and all of those errors went away.

[mateonunez]

I've downgraded too to the 0.26.0 version.

If this work in v0.26.0?

Yes, it is working on v0.26.0.

[yoyo930021]

I think the problem is not what I think.
@mateonunez @jtsom
Please try to provide reproducible case.
Otherwise it’s really hard to debug.

[jtsom]

Believe me, I am trying to. A simple app that is structured the same as my more complicated app won't show the error. Simple components in my large app has several errors, but a more complicated component has none. They have the same data, methods, computed sections, and make heavy use of Vuex getters.

Here's the complicated component, and how the data() function is defined - it's composed of many properties - numbers, strings, arrays of various items, object with various items - and no @type information:

and here is the simpler component with only 3 data items, all strings:

note the simple one indicates; "data?: unknown" and the other shows "data: DataDef..."

[jtsom]

Here is a reproducible component. If you change the computed to return a string, the error will go away. As it is, it shows these errors:

<template>
<div class='hello'>
  {{ title }} {{ testing }}
    <div v-for="item in items">{{ item }}</div>
    <button @click="clickMe">Click me</button>
</div>
</template>

<script>

export default {

  props: {
    testing: { type: String }
  },
  computed: {
    title() {      
      return this.testing === 'hello'; // ** change to just return a string to remove error
    }
  },
  methods: {
    clickMe() {
      console.log('click');
    }
  },
  data() {
    return {
      items: ['item1', 'item2', 'item3', 'item4', 'item5']
    };
  }
};
</script>

Adding type annotations (assuming I'm doing it correct) does not help:

[yoyo930021]

Here is a reproducible component. If you change the computed to return a string, the error will go away. As it is, it shows these errors:

<template>
<div class='hello'>
  {{ title }} {{ testing }}
    <div v-for="item in items">{{ item }}</div>
    <button @click="clickMe">Click me</button>
</div>
</template>

<script>

export default {

  props: {
    testing: { type: String }
  },
  computed: {
    title() {      
      return this.testing === 'hello'; // ** change to just return a string to remove error
    }
  },
  methods: {
    clickMe() {
      console.log('click');
    }
  },
  data() {
    return {
      items: ['item1', 'item2', 'item3', 'item4', 'item5'],

      items2: []
    };
  }
};
</script>

This problem is #1707 and vuejs/vue#8721
It's a upstream problem and The v0.26.0 version also have error.
The v0.26.1 version is only change for can use template interpolation service when vetur.validation.template: false.
If you no need template interpolation service, please set vetur.experimental.templateInterpolationService: false

[jtsom]

Weird. Because v0.26.0 did not have that error, as as far as I know I did not have that option turned on.

Either way, turning that option off did eliminate the error using v.0.26.1

Hopefully this will get fixed soon.

(I assume by "template interpolation service" you mean like: {{ card.label }} ? or is that something else? )

[octref]

I added vetur.validation.interpolation. Default to true.

Other issues are all upstream and there's nothing I can do from Vetur side. Either TS need to fix circularity or you need to type computed property manually.

[yoyo930021]

vuejs/vue#11235 does not seem to fix this case for me:

<template>
  <div>
    {{ fo }}
  </div>
</template>

<script>
import * as _ from 'lodash'

export default {
  props: ['foo', 'bar'],
  
  data() {
    return {
      fo: 1
    }
  },
  
  computed: {
    a() {
      return this.fo + 1
    }
  }
}
</script>

I study this case.
There are two type errors.

I find the only way when typescript 3.9. =_=
Code:
https://github.com/yoyo930021/vue/tree/fix-type-when-computed-return-this-3.9

I will study when I have time.

[dyllandry]

In case others arrive, here's a summary of the current problem, the minimal reproducible example, and what you can do to try and fix it: #1707 (comment)

[krushndayshmookh]

I've downgraded to the 0.26.0 version and it works.

this worked for me

[yoyo930021]

I've downgraded to the 0.26.0 version and it works.

this worked for me

set vetur.validation.interpolation false in latest version.

[krushndayshmookh]

I've downgraded to the 0.26.0 version and it works.

this worked for me

set vetur.validation.interpolation false in latest version.

this solves everything. thanks

[anubhavkamath]

I've downgraded to the 0.26.0 version and it works.

this worked for me

set vetur.validation.interpolation false in latest version.

this solves everything. thanks

Was wondering where this is set but found it: Go to Settings and search for Vetur Validation.

[krushndayshmookh]

search for vetur.validation.interpolation

[iSeanWeiDev]

Well, I am not sure, it does work for JS validations.

[janvorisek]

Vetur still works well while using class-style components. Because of a smoother transition to Vue 3, we wanted to migrate to options/composition API and having the above mentioned issues.

Interestingly - computed is fine, but adding components: { AppSidebar, AppFooter }, leads to the same error.

[yoyo930021]

Vetur still works well while using class-style components. Because of a smoother transition to Vue 3, we wanted to migrate to options/composition API and having the above mentioned issues.

Interestingly - computed is fine, but adding components: { AppSidebar, AppFooter }, leads to the same error.

If you use Vue3, there's no problem.
Because it is a type defined problem in vue2.
If you use composition API in vue2, almost no problem.
Just remember not to use computed in option API.

[thebrownfox]

I don't use TS. I'd love to have completion in templates. JSDoc doesn't seem to do anything.

[yoyo930021]

I don't use TS. I'd love to have completion in templates. JSDoc doesn't seem to do anything.

JSDoc can help you.
We can't do anything in this project.
We have discussed this problem with core library maintainers.

[thebrownfox]

@yoyo930021 can you guide me with the JSDoc? None of the annotations work and I still get the error.

/** @returns { {filteredTags: object} } **/
    data() {
        return {
            /** @type {object} **/
            filteredTags: {
                categories: new filterProperty(),
                media: new filterProperty(),
                orientation: new filterProperty(),
                camera: new filterProperty(),
            },
    }

[thebrownfox]

Doesn't work on simple components with properly defined props.

[thebrownfox]

@yoyo930021 @octref Cloned veturpack to get better idea what's going on and to fiddle around. The repo worked even when I copied parts of the code like props and template but not when I copied all of it. Seems like it works when I get rid of emits: ["click"]. Does Vetur support emits option as it produces this bug?

[thebrownfox]

It appears even when I use beforeUnmount(). After a while, I figured out it's because I haven't updated to vue3 on this particular project yet but started to use newer eslint and hooks/options. Everything seems to work with vue3.

[yoyo930021]

@yoyo930021 @octref Cloned veturpack to get better idea what's going on and to fiddle around. The repo worked even when I copied parts of the code like props and template but not when I copied all of it. Seems like it works when I get rid of emits: ["click"]. Does Vetur support emits option as it produces this bug?

https://github.com/vuejs/vetur/blob/master/docs/FAQ.md#property-xxx-does-not-exist-on-type-combinedvueinstance

#2392

[dawidstefaniak]

Setting return types for all functions inside computed solved it for me.

[thebrownfox]

Sometimes I get the error even when I set return types. Disappears after I comment out props.

[serkon]

I get below error:
Property 'doThisInput' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'.

And also doThisClickgave same error.

Solution:
i have added declaration to component.

<script lang="ts">
  import Vue from 'vue';

  // Add below code sample to your component
  declare module 'vue/types/vue' {
    interface Vue {
      fields: Field[];
      doThisClick: () => void;
      doThisInput: () => void;
    }
  }

  export default Vue.extend({
    name: 'form-builder',
    data() {
      return {
        fields: [
          {
            name: 'name',
            events: { click: this.doThisClick, input: this.doThisInput },
          },
        ],
      };
    },
    methods: {
      doThisClick(field: Field): void {
        console.log('click', field, event);
      },
      doThisInput(field: Field): void {
        console.log('Input', field, event);
      },
    },
  });
</script>

[caybokotze]

For anyone encountering this issue. I have seen it creep up a few times when using typescript. I'm not sure if it's an issue with vue-tsc or something else, but this is the solution to get around the linter warnings/errors.

Normally the issue would look something like this...

TS2339: Property 'title' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'.

The solution is to define some types so that Vue is aware of what is being defined in the component and those corresponding return types. The issue happens when for some reason Vue can't figure it out automatically and needs some help.

Example:

interface IData {
  title: string;
}
interface IProps {

}
interface IComputed {

}
interface IMethods {
 
}

Define the component

export default Vue.extend<IData, IMethods, IComputed, IProps>({
   data() {
      title: "Some title"
   }
});

Please also note that the order in which you pass your type parameters is important. The order follows DMCP (Data, Methods, Computed, Props).

Hope this helps. If anyone has any other specific questions, please email me. My email is on my Github profile.

[ayoubjamouhi]

I fix it by adding this line in settings.json
"vetur.experimental.templateInterpolationService": false

[yoyo930021]

Please refer https://vuejs.github.io/vetur/guide/FAQ.html#property-xxx-does-not-exist-on-type-combinedvueinstance

I will lock this issue. If you have a problem, please open a new issue with template.