export 'Route' was not found in 'vue-router'

[doppelreim]

Version

3.0.0-beta.15

Reproduction link

https://github.com/doppelreim/vue-test-app/tree/test-import-route

Steps to reproduce

Run npm run serve

What is expected?

The app should compile without warnings.

What is actually happening?

It does not compile without warnings.

The output says:

 WARNING  Compiled with 4 warnings                                                                                                            12:38:25

 warning  in ./src/components/HelloWorld.vue?vue&type=script&lang=ts

"export 'Route' was not found in 'vue-router'

 warning  in ./src/components/HelloWorld.vue?vue&type=script&lang=ts

"export 'Route' was not found in 'vue-router'

 warning  in ./src/components/HelloWorld.vue?vue&type=script&lang=ts

"export 'Route' was not found in 'vue-router'

 warning  in ./src/components/HelloWorld.vue?vue&type=script&lang=ts

"export 'Route' was not found in 'vue-router'

---

The change that introduces the warnigns can be seen here:
doppelreim/vue-test-app@af03672

I want to add a Watcher on $route. The parameters of the function (newRoute and oldRoute) should be typed. I assume Route is the correct type.

I checked out /node_modules/vue-router/types/index.d.ts and there Route does get exported, as far as I can tell.

If I use Route inside of the function-body, like this:

const r: Route = {
      path: '',
      hash: '',
      query: {},
      params: {},
      fullPath: '',
      matched: [],
    };

then it does not throw errors.
And if i leave out some of the required attributes, then the compiler rightfully complains. So I assume the export/import does work here.

[yyx990803]

The cause is that when using @Watch decorator, somehow the emitted JS from TS is using the Route type import as a value:

tslib_1.__decorate([
    Prop(),
    tslib_1.__metadata("design:type", String)
], HelloWorld.prototype, "msg", void 0);
tslib_1.__decorate([
    Watch('$route'),
    tslib_1.__metadata("design:type", Function),
    tslib_1.__metadata("design:paramtypes", [typeof (_a = typeof Route !== "undefined" && Route) === "function" && _a || Object, typeof (_b = typeof Route !== "undefined" && Route) === "function" && _b || Object]),
    tslib_1.__metadata("design:returntype", Promise)
], HelloWorld.prototype, "onParamChanged", null);
HelloWorld = tslib_1.__decorate([
    Component
], HelloWorld);

This causes the Route import to be preserved in the generated JS, but vue-router does not actually export Route as a value.

Not sure if this should be addressed in vue-property-decorator or in TS itself, but either way there's nothing we can do in Vue CLI regarding this.

[yyx990803]

/cc @octref @kaorun343 @ktsn

[WORMSS]

I see this is closed.. But this is still a problem? So, what do we do to get rid of this?

[doppelreim]

It should not be an issue any more.
See the two other closed issues I linked from here.

[eyedean]

As of Typescript 3.8 (which is older than the discussion in this ticket), with type-only import/exports, one can use import type { Router } instead of import { Router }.

That fixed these warnings for me. :)

I guess it could fix a similar issue in other cases:

• generated JS uses type as value kaorun343/vue-property-decorator#107
• Vue router issue when using reflect metadata kaorun343/vue-property-decorator#197

[lgarczyn]

It is possible to ask typescript-eslint to fix all imports of types to the import type syntax.

You simply need to use@typescript-eslint/consistent-type-import with { prefer: 'import-types'}