Vue-router: Compile error at typescript: types/router.d.ts and types/vue.d.ts

[yajamon]

I expect "node_modules/vue-router/types/router.d.ts" do reference to "d.ts" of vue package,
but tsc says this do reference to "node_modules/vue-router/types/vue.d.ts".

reproduction

mkdir sample
cd sample

echo '{"private": true}' > package.json
npm install -D vue vue-router typescript
{
    echo 'import * as Vue from "./node_modules/vue/types/index";'
    echo 'import * as VueRouter from "./node_modules/vue-router/types/index";'
} > index.ts
$(npm bin)/tsc -t 'ES2015' index.ts

Error message

node_modules/vue-router/types/router.d.ts(2,10): error TS2305: Module '"/path/to/sample/node_modules/vue-router/types/vue"' has no exported member 'ComponentOptions'.
node_modules/vue-router/types/router.d.ts(2,28): error TS2305: Module '"/path/to/sample/node_modules/vue-router/types/vue"' has no exported member 'PluginFunction'.
node_modules/vue-router/types/router.d.ts(13,43): error TS2304: Cannot find name 'Vue'.
node_modules/vue-router/types/router.d.ts(19,8): error TS2304: Cannot find name 'Vue'.
node_modules/vue-router/types/router.d.ts(67,25): error TS2304: Cannot find name 'Vue'.
node_modules/vue-router/types/vue.d.ts(17,13): error TS2428: All declarations of 'ComponentOptions' must have identical type parameters.
node_modules/vue-router/types/vue.d.ts(17,40): error TS2304: Cannot find name 'Vue'.

https://gist.github.com/yajamon/f49ca6a7fa92a7b43e46cabb3f900aaa

[yajamon]

I wrote code below, and it worked as I expected.
https://github.com/yajamon/vue-router/commit/e870e42eab60b08d1d9a46ff8f09006f80ffebb4

[yyx990803]

/cc @ktsn

[ktsn]

If you set --target compiler option to es2015, the default value of --moduleResolution will be classic, then tsc can't resolve vue and vue-router.
Try setting --moduleResolution to node.

https://www.typescriptlang.org/docs/handbook/compiler-options.html

[yajamon]

It worked! thanks!

[seanfisher]

@ktsn I'm still getting these errors with tsconfig.json of

{
    "compilerOptions": {
        "strictNullChecks": true,
        "declaration": true,
        "target": "es2015",
        "module": "commonjs",
        "sourceMap": true,
        "moduleResolution": "node",
        "noImplicitAny": true,
        "lib": [
            "dom",
            "es2015",
            "es2015.promise"
        ]
    },
    "include": [
        "src/**/*.ts"
    ],
    "typeAcquisition": {
        "enable": true
    }
}

Any other reason this might happen?

[BrianDGLS]

Same issue for me.

ERROR in /Users/bdouglas/Documents/workspace/vue-app/node_modules/vue-router/types/router.d.ts
(2,10): error TS2305: Module '"vue"' has no exported member 'ComponentOptions'.

ERROR in /Users/bdouglas/Documents/workspace/vue-app/node_modules/vue-router/types/router.d.ts
(2,28): error TS2305: Module '"vue"' has no exported member 'PluginFunction'.

ERROR in /Users/bdouglas/Documents/workspace/vue-app/node_modules/vue-router/types/router.d.ts
(13,43): error TS2304: Cannot find name 'Vue'.

ERROR in /Users/bdouglas/Documents/workspace/vue-app/node_modules/vue-router/types/router.d.ts
(19,8): error TS2304: Cannot find name 'Vue'.

ERROR in /Users/bdouglas/Documents/workspace/vue-app/node_modules/vue-router/types/router.d.ts
(67,25): error TS2304: Cannot find name 'Vue'.

ERROR in /Users/bdouglas/Documents/workspace/vue-app/node_modules/vue-router/types/vue.d.ts
(17,13): error TS2428: All declarations of 'ComponentOptions' must have identical type parameters.

ERROR in /Users/bdouglas/Documents/workspace/vue-app/node_modules/vue-router/types/vue.d.ts
(17,40): error TS2304: Cannot find name 'Vue'.

using the following config

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": false
    }
}

Using typescript v2.1.4

edit

replicating yajamon@e870e42 solves the problem

[ktsn]

Looks like the cause is in the other parts.
Could you share whole your project that reproduce this problem?

[BrianDGLS]

@ktsn I can't make the project public. Is there anything specific you want to know?

[ktsn]

I suspect a configuration of typings has a problem if you are using it.
Anyway, it would be helpful to minimize the reproduction to remove the code that prevent you to make it public.

[Vertygo]

Not sure if this could help but it helped me. If you are using vue-class-component you will need to enable --experimentalDecorators and --allowSyntheticDefaultImports flag.
For more instructions read https://github.com/vuejs/vue-class-component

[atracore-dev]

I certify : I got the same problem and solved it with typings
typings u -S -G vue
the "vue" types it install seem buggy simply

[zhaoshengjun]

I have the same problem recently and fixed with a different method: by changing the way to import Vue from import vue = require('vue')to import Vue from 'vue' in both vue.d.ts and router.d.ts

The reason is that the old import is using require. And to use the require in TypeScript, there must be a export = clause in the target file, which in this case, is not.

[mlholt03]

I'm experiencing this issue as well.

[crtjr64]

Same issue but this all happened after I followed someone else's instruction of running npm update. All of these settings are fine, but now I have the exact same set of errors.

ERROR in [at-loader] ./node_modules/vue-router/types/router.d.ts:4:35
TS2709: Cannot use namespace 'Vue' as a type.
ERROR in [at-loader] ./node_modules/vue-router/types/router.d.ts:13:43
TS2709: Cannot use namespace 'Vue' as a type.
ERROR in [at-loader] ./node_modules/vue-router/types/router.d.ts:19:8
TS2709: Cannot use namespace 'Vue' as a type.
ERROR in [at-loader] ./node_modules/vue-router/types/router.d.ts:93:25
TS2709: Cannot use namespace 'Vue' as a type.
ERROR in [at-loader] ./node_modules/vue-router/types/vue.d.ts:17:13
TS2428: All declarations of 'ComponentOptions' must have identical type parameters.
ERROR in [at-loader] ./node_modules/vue-router/types/vue.d.ts:17:40
TS2709: Cannot use namespace 'Vue' as a type.
ERROR in [at-loader] ./node_modules/vue/types/options.d.ts:55:18
TS2428: All declarations of 'ComponentOptions' must have identical type parameters.

[crtjr64]

@zhaoshengjun I performed an update to the packages to the wanted level. Then applied your changes and every error except one is resolved. Also, I have been able to see the Emit option as well. I've got one error left though: declarations.d.ts:6:33
TS2702: 'Vue' only refers to a type, but is being used as a namespace here.

[wtfuii]

Updating the vue-router package to the most recent version solved the problem for me.