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

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: https://github.com/doppelreim/vue-test-app/commit/af036724ecbe53853ce10707796c82213ae07a43

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.

[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:

• https://github.com/kaorun343/vue-property-decorator/issues/107
• https://github.com/kaorun343/vue-property-decorator/issues/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'}