Vue js 2.5.2 & typescript upgrade error

Question

I'm trying to upgrade vue js to 2.5.2 with typescript 2.5.3.

Here is the my index.ts file:

import Vue from 'vue'

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})

Here is my tsconfig.json

{
  "compilerOptions": {
    "outDir": "./wwwroot/build/",
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "lib": [
      "dom",
      "es5",
      "es2015.promise"
    ],
    "types": [
      "vue-typescript-import-dts"
    ],
    "experimentalDecorators": true
  },
  "include": [
    "Features/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

And here is the error message:

ERROR in C:\dev\proj\src\Proj.Web\node_modules\vue-typescript-import-dts\index.d.ts (3,36): error TS2304: Cannot find name 'Vue'.

My setup was working fine with vue js 2.4.

I remove the "allowSyntheticDefaultImports": true, as said here

Previously, we already recommend using ES-style imports (import Vue from ‘vue’) everywhere with “allowSyntheticDefaultImports”: true in tsconfig.json. The new typings will officially move to ES-style import/export syntax, so that config is no longer necessary, and users are required to use ES-style imports in all cases.

Anyone see what I'm missing?

Fenton Fenton · Accepted Answer · 2017-10-16T19:14:06

I have just started a new folder in VSCode and I have a couple of observations.

The package for Vue on NPM contains type information, so you don't need to obtain additional types for Vue (i.e. don't grab @types/vue from NPM).

"dependencies": {
    "vue": "^2.5.2"
}

With just the vue package, and without the section:

"types": [
  "vue-typescript-import-dts"
],

I could compile everything just fine with your sample code.

Full details...

package.json

{
    "name": "sample-vue",
    "private": true,
    "dependencies": {
        "vue": "^2.5.2"
    }
}

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./wwwroot/build/",
        "noImplicitAny": false,
        "noEmitOnError": true,
        "removeComments": false,
        "sourceMap": true,
        "target": "es5",
        "module": "es2015",
        "moduleResolution": "node",
        "lib": [
            "dom",
            "es5",
            "es2015.promise"
        ],
        "experimentalDecorators": true
    },
    "include": [
        "*.ts"
    ],
    "exclude": [
        "node_modules",
        "wwwroot"
    ]
}

app.ts

import Vue from 'vue'

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})

Vue js 2.5.2 & typescript upgrade error

1 Answers