How to fix "Property XX does not exist on type 'CombinedVueInstance" errors in VSCode? (Vue with Typescript)

Question

VS Code is reporting a lot of problems/red lines when editing my Vue Typescript files:

Example error:

[ts] Property 'isLoading' does not exist on type 'CombinedVueInstance<Vue, 
object, > object, object, Readonly<Record<never, any>>>'. [2339]

The problem seems to come when I reference a property on "this", and all such references have a red line in the editor stating a variant of the error above. The problem is the same for both properties defined in Vue's data object and functions defined in methods.

Now, there are two interesting aspects:

I had no issue with these files until today. Yesterday, before shutting down, everything was working as intended. Restarting today I got this issue.
The code compiles and runs. If I build the files using tsc, they compile nicely - and the application deploys and works as intended.

Info about my setup:

npm view typescript version gives me version 3.2.4
Vue is at 2.5.22
VS Code is at 1.30.2.

tsconfig.js:

{
    "compilerOptions": {
        "lib": [
            "es6",
            "dom"
        ],
        "noImplicitAny": true,
        "allowJs": true,
        "target": "es5",
        "strict": true,
        "module": "es6",
        "moduleResolution": "node",
        "outDir": "../../../dist/public/js",
        "sourceMap": true
    }
}

I have tried the following:

Reinstalling Typescript and Vue
Restarting VS Code numerous times
Restarting TSServer manually
Restarting the computer

I am now completely stumped - and hope someone can help me ...

Code example below (all this. references have a red line in my VS Code):

import axios from "axios";
import Vue from "vue";

// tslint:disable-next-line no-unused-expression
new Vue({
    computed: {
        hasProvider(): boolean {
            // this line throw two errors
            return this.isLoading === false && this.providerList.length > 0;
        },
    },
    data() {
        return {
            description: "",
            id: "",
            isLoading: true,
            name: "",
            providerList: [],
        };
    },
    el: "#app",
    methods: {
        loadProviderList() {
            axios
                .get("/api/provider/all")
                .then((res: any) => {
                    // these lines throw an error
                    this.providerList = res.data.items;
                    this.isLoading = false;
                })
                .catch((err: any) => {
                    // tslint:disable-next-line:no-console
                    console.log(err);
                });
        }
    },
    mounted() {
        // this line throw an error
        return this.loadProviderList();
    }
});

Maybe it will help https://stackoverflow.com/questions/56002310/property-xxx-does-not-exist-on-type-combinedvueinstancevue-read/68505277#68505277. — Serkan KONAKCI, Jul 23 '21 at 21:45

score 6 · Answer 1 · answered Sep 04 '20 at 16:01

6

Came across this error at work today (Vue without TypeScript in VSCode).

It also came out of nowhere for us, and in the end the culprit was just that the Vetur extension in VSCode needed to be reloaded.

answered Sep 04 '20 at 16:01

troglobyte

61
1
3

Had the same issue. Probably started happening after VS Code update or an npm package update. Tried disabling and reloading Vetur. It seemed to work at first but then the squiggly lines came back. – ak22 Oct 01 '20 at 12:50
1

While reloading didin't work what did was disabling Vetur->Validation:Interpolation in VSCode settings. – ak22 Oct 01 '20 at 13:07

score 6 · Answer 2 · edited Feb 25 '21 at 14:58

6

In settings.json, set:

"vetur.experimental.templateInterpolationService": false

edited Feb 25 '21 at 14:58

ouflak

2,458
10
44
49

answered Feb 24 '21 at 17:17

dev_hero

194
1
7

I use Volar now but yet see the same problem – yashas123 Aug 29 '23 at 14:00

score 2 · Answer 3 · answered Dec 02 '22 at 09:04

2

I solved this issue with:

tsconfig.json

{
    "compilerOptions": {
        "noImplicitThis": false
    }
}

answered Dec 02 '22 at 09:04

Eflyax

5,307
2
19
29

score -1 · Answer 4 · answered Jan 23 '19 at 18:28

Seems the issue was with the return statement in my mounted() stage. Removing that return (probably something leftover from an example I was using) solved the problem.

mounted() {
        // this works
        this.loadProviderList();
}

Still, strange that the environment changed behaviour from one day to the next, and that it compiled - might never get an answer to that :)

How to fix "Property XX does not exist on type 'CombinedVueInstance" errors in VSCode? (Vue with Typescript)

4 Answers4