vetur: Property 'xxx' does not exist on type 'CombinedVueInstance & Vue, object, object, object, Record>'
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.
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 23
- Comments: 65 (22 by maintainers)
Commits related to this issue
- Fix #2131 — committed to cereschen/vetur by octref 4 years ago
I found in .vscode folder a file settings.json
{ “vetur.validation.template”: false,
“eslint.validate”: [“javascript”, “javascriptreact”, “typescript”, “vue”],
“vetur.experimental.templateInterpolationService”: true (change this to false. It worked for me) }
search for
vetur.validation.interpolation
set
vetur.validation.interpolation
false in latest version.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.
Well, for me, temporary solution is to downgrade to the previous version until this is fixed.
I’ve downgraded to the
0.26.0
version and it works.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.
You can’t downgrade to fix it. The only possible way is to install TypeScript 2.9 in project, And set
"vetur.useWorkspaceDependencies": true
Same here. Big problem…
Setting return types for all functions inside computed solved it for me.
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:
Adding type annotations (assuming I’m doing it correct) does not help:
Yes, it is working on
v0.26.0
.same, this worked for me
I think the solution is to have a config that controls
templateInterpolationDiagnostics
.For completion/definition/reference/hover, people should still be able to use them without having to fully type their components.
I think it’s time we move interpolation service out of experimental status and fix all remaining issues.
How about adding
vetur.validation.interpolation
, defaulted to false? Completion/definition/reference/hover powered by template interpolation service can be turned on by default.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 setvetur.experimental.templateInterpolationService: false
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…
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:
Define the component
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.
I get below error:
Property 'doThisInput' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'.
And also
doThisClick
gave same error.Solution: i have added
declaration
to component.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.I downgraded too. Only solution I could find. It seemed to want types in javascript and I can’t change 1000’s of lines of code just for this.
Yup. No errors with v0.26.0:
Hm. Ok. I do remember reading that article and I did turn that option on. Up until v0.26.1 I had no issues. Having that option on using v0.26.1, results in the reported errors. Turning it off remove the errors. So something in 0.26.1 triggered the problem.