Cannot find module 'vue-router/auto'

[rballonline]

I ran yarn create vuetify

Options:

√ Which preset would you like to install? » Essentials (Base, Layouts, Pinia)
√ Use TypeScript? ... Yes
√ Would you like to install dependencies with yarn, npm, pnpm, or bun? » yarn

Tried running yarn build

yarn run v1.22.21
$ vue-tsc --noEmit && vite build
src/router/index.ts:8:48 - error TS2307: Cannot find module 'vue-router/auto' or its corresponding type declarations.

8 import { createRouter, createWebHistory } from 'vue-router/auto'
~~~~~~~~~~~~~~~~~

src/router/index.ts:9:30 - error TS2307: Cannot find module 'virtual:generated-layouts' or its corresponding type declarations.

9 import { setupLayouts } from 'virtual:generated-layouts'

yarn dev seems to work, at least the one page is coming up correctly.

I was able to get the first error to clear by following some of the steps here: https://github.com/posva/unplugin-vue-router?tab=readme-ov-file#typescript although I have 0 clue if that's the correct thing to do.

[rballonline]

Possibly related to #41

I also just tested with the Default preset, yarn build works fine. Something's off with the auto router stuff.

[wouterkroes]

I have found the fix: https://github.com/posva/unplugin-vue-router?tab=readme-ov-file#typescript

I guess typed-router.d.ts should be added to the tsconfig.json by the create-vuetify if you select typescript true

[jonaaldas]

I have found the fix: https://github.com/posva/unplugin-vue-router?tab=readme-ov-file#typescript

I guess typed-router.d.ts should be added to the tsconfig.json by the create-vuetify if you select typescript true

I tried that fix and no luck. Maybe I am doing it wrong. Can you share your tsconfig.json file?

[wouterkroes]

Hmm, bummer to hear that.

I did nothing special, just add it to the include field as stated in the docs.
.

[Faeten]

does it fix error TS2307: Cannot find module 'virtual:generated-layouts' or its corresponding type declarations. for you ? i fixed the first issue with typed-router but not this one.
and when you create a vuetify projet with the other preset the version shown is the last one, whereas essentials preset show 3.0.0

[juw177]

The virtual:generated-layouts issue is a missing option that needs to be added for to tsconfig for vite-plugin-vue-layouts.
https://github.com/JohnCampionJr/vite-plugin-vue-layouts

{
  "compilerOptions": {
    "types": ["vite-plugin-vue-layouts/client"]
  }
}

Following the above, 'vue-router/auto' missing error happens when upgrading unplugin-vue-router to 0.8.x, which for some reason does not generate the vue-router/auto module in the d.ts file

posva/unplugin-vue-router#323

[posva]

I tested locally and what's missing is "moduleResolution": "Bundler", in the tsconfig.json (it's a recommended setting). I will add that to the docs

[qizhou23]

@posva still have this problem with this config in tsconfig.json

{
  "include": [
    "./typed-router.d.ts"
  ],
  "compilerOptions": {
    "module": "ES2015",
    "moduleResolution": "Bundler",
    "types": [
      "unplugin-vue-router/client",
    ]
  },
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    }
  ],
}

any other config should I use ?

[qizhou23]

@posva still have this problem with this config in tsconfig.json

{
  "include": [
    "./typed-router.d.ts"
  ],
  "compilerOptions": {
    "module": "ES2015",
    "moduleResolution": "Bundler",
    "types": [
      "unplugin-vue-router/client",
    ]
  },
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    }
  ],
}

any other config should I use ?

but when I use this config and run "run-p type-check \"build-only {@}\" --" ,no error happened

[Shujee]

I can confirm that adding the following in tsconfig.json fixes the issue for me:

1. Under compilerOptions, add:

     "types": [
      "unplugin-vue-router/client",
      "vite-plugin-vue-layouts/client"
     ]

2. Under include, add:
   "./typed-router.d.ts"

[geraldmaale]

This tsconfig.json fixed my issues:

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    "paths": {
      "@/*": ["src/*"]
    },
    "types": ["vite-plugin-vue-layouts/client", "node"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "typed-router.d.ts"
  ],
  "references": [{ "path": "./tsconfig.node.json" }],
  "exclude": ["node_modules"]
}

Note that changes were made to types and include.

[TomZhong-au]

This tsconfig.json fixed my issues:

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    "paths": {
      "@/*": ["src/*"]
    },
    "types": ["vite-plugin-vue-layouts/client", "node"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "typed-router.d.ts"
  ],
  "references": [{ "path": "./tsconfig.node.json" }],
  "exclude": ["node_modules"]
}

Note that changes were made to types and include.

This did solve the issue.