Cannot find vue-router/types/router , cannot use VueRouter as a type

[pandamakerdroid]

I added vue-gtag-next in vue3 TS as following

• in main.ts

  import VueGtag from "vue-gtag-next";
  app.use(VueGtag, {
  config: { id: "268346821" }
  });

  and it causes following error on build

node_modules/vue-gtag-next/vue-gtag-next.d.ts:2:25 - error TS2307: Cannot find module 'vue-router/types/router' or its corresponding type declarations.

2   import { Route } from 'vue-router/types/router';
                          ~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/vue-gtag-next/vue-gtag-next.d.ts:306:39 - error TS2709: Cannot use namespace 'VueRouter' as a type.

306   export function trackRouter(router: VueRouter, options?: RouterOptions): void;
                                          ~~~~~~~~~

Found 2 errors.

Is there anything that I am not configuring correctly?

[soichih]

I tried installing npm install vue-router@4 but that didn't cure it..

Installing vue-router@4 leads to another issue

node_modules/vue-gtag-next/vue-gtag-next.d.ts:2:25 - error TS2307: Cannot find module 'vue-router/types/router' or its corresponding type declarations.

2   import { Route } from 'vue-router/types/router';
                          ~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/vue-gtag-next/vue-gtag-next.d.ts:306:39 - error TS2709: Cannot use namespace 'VueRouter' as a type.

306   export function trackRouter(router: VueRouter, options?: RouterOptions): void;
                                          ~~~~~~~~~

[d-richard]

Any solution to this? I am getting the same result when using vite to build.

tsc --noEmit && vite build

[soichih]

I've updated various packages and things and this issue disappeared.

I am using the following set.

  "dependencies": {
    "element-plus": "^1.1.0-beta.20",
    "numeral": "^2.0.6",
    "unplugin-vue-components": "^0.15.6",
    "vue": "^3.2.16",
    "vue-gtag-next": "^1.14.0",
    "vue-mapbox-ts": "^0.6.2",
    "vue-next-select": "^2.10.1",
    "vue-router": "^4.0.11",
    "vue-tsc": "^0.28.0",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@intlify/vite-plugin-vue-i18n": "^2.4.0",
    "@types/node": "^16.9.0",
    "@types/numeral": "^2.0.2",
    "@types/vue-router": "^2.0.0",
    "@types/vue-select": "^3.11.2",
    "@vitejs/plugin-vue": "^1.9.2",
    "@vue/compiler-sfc": "^3.2.10",
    "sass": "^1.42.1",
    "typescript": "^4.4.3",
    "vite": "^2.6.0",
    "vite-plugin-yaml": "^1.0.5"
  }

→ node --version
v14.17.1
→ tsc --version
Version 4.4.2

[GoudekettingRM]

Any solution for this? For now I just added this to my env.d.ts:

declare module 'vue-gtag-next' {
  export type VueRouter = any;
}
declare module 'vue-router/types/router' {
  export type Route = any;
}

That just fakes the presence of the needed types, but doesn't actually help...

[enisor]

I encountered this problem too.

[morisakikeita01]

I encountered this problem too.