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.

[WMcKibbin]

This should probably be reopened as the current default is:

  "include": [
    "./src/typed-router.d.ts"
  ],

And changing to

  "include": [
  "src/**/*.ts",
  "src/**/*.d.ts",
  "src/**/*.tsx",
  "src/**/*.vue",
  "src/typed-router.d.ts"
],

Fixes all issues with these imports

import { createRouter, createWebHistory } from 'vue-router/auto'
import { setupLayouts } from 'virtual:generated-layouts'

Module '"vue-router/auto"' has no exported member 'createWebHistory'.ts(2305)

Module '"vue-router/auto"' has no exported member 'createRouter'.ts(2305)

Cannot find module 'virtual:generated-layouts' or its corresponding type declarations.ts(2307)

[johnleider]

What install options are you using?

[TomT15]

This should probably be reopened as the current default is:

  "include": [
    "./src/typed-router.d.ts"
  ],

And changing to

  "include": [
  "src/**/*.ts",
  "src/**/*.d.ts",
  "src/**/*.tsx",
  "src/**/*.vue",
  "src/typed-router.d.ts"
],

Fixes all issues with these imports

import { createRouter, createWebHistory } from 'vue-router/auto'
import { setupLayouts } from 'virtual:generated-layouts'

Module '"vue-router/auto"' has no exported member 'createWebHistory'.ts(2305)

Module '"vue-router/auto"' has no exported member 'createRouter'.ts(2305)

Cannot find module 'virtual:generated-layouts' or its corresponding type declarations.ts(2307)

I am also having the same issue in regardles to not being able to find the modules. I have been through the documents at least 10x checking things.
In regards to above. I created a new test project and ran through the documentation with no issue.

This leaves me more confused because when checking both of the projects the layout is the same with the exception of a few other settings. No customization's have been made to the options within the vite.config.ts.

I am rather confused at this point.

I did notice on the test project that, within the router/index.ts, the the vue-router/auto resolves to the client.d.ts file within the unplugin-vue-router/client.d.ts/vue-router/auto which is to be expected. I understand that much.

Im just really confused why my existing project ,when moving over to router/auto cannot find the same modules. I DID manually go and verify the files were there (within the node_modules). There seems to be a link somewhere that is broken.

Im going to ask a college to review this with me to make sure no spelling errors (though i used C&P techniques).

Update: Co-worker and I did figure out that the plugin is working but there is still a reference issue with the modules ion the router/index.ts file. Not sure how to fix them at this time