Weird vue router warnings on cold start

[daniandl]

Thanks for trying to tackle all these Nuxt<>Vuetify issues with this library.

I pretty much copied the playground setup with the configFile variant, because I want to customize the components. It works fine, the hydration time and cold start time is a bit longer, but that's normal, as Vuetify docs said.

However, the server and client logs print this:

ℹ Vite server warmed up in 1447ms                                             4:21:32 PM
ℹ Vite client warmed up in 1668ms                                             4:21:32 PM
✔ Nitro built in 352 ms                                                 nitro 4:21:32 PM
[Vue Router warn]: No match found for location with path "/_nuxt/@plugin-vuetify/lib/components/VAppBar/VAppBar.sass"
[Vue Router warn]: No match found for location with path "/_nuxt/@plugin-vuetify/lib/components/VAppBar/VAppBar.sass"
[Vue Router warn]: No match found for location with path "/_nuxt/@plugin-vuetify/lib/components/VAppBar/VAppBar.sass"
[Vue Router warn]: No match found for location with path "/_nuxt/@plugin-vuetify/lib/components/VAppBar/VAppBar.sass"
[Vue Router warn]: No match found for location with path "/_nuxt/@plugin-vuetify/lib/components/VImg/VImg.sass"
[Vue Router warn]: No match found for location with path "/_nuxt/@plugin-vuetify/lib/components/VImg/VImg.sass"
[Vue Router warn]: No match found for location with path "/_nuxt/@plugin-vuetify/lib/components/VImg/VImg.sass"
[Vue Router warn]: No match found for location with path "/_nuxt/@plugin-vuetify/lib/components/VImg/VImg.sass"
[Vue Router warn]: No match found for location with path "/_nuxt/@plugin-vuetify/lib/components/VApp/VApp.sass"
[Vue Router warn]: No match found for location with path "/_nuxt/@plugin-vuetify/lib/components/VApp/VApp.sass"
[Vue Router warn]: No match found for location with path "/_nuxt/@plugin-vuetify/lib/components/VApp/VApp.sass"
[Vue Router warn]: No match found for location with path "/_nuxt/@plugin-vuetify/lib/components/VApp/VApp.sass"
[Vue Router warn]: No match found for location with path "/_nuxt/@plugin-vuetify/lib/components/VToolbar/VToolbar.sass"
[Vue Router warn]: No match found for location with path "/_nuxt/@plugin-vuetify/lib/components/VToolbar/VToolbar.sass"
[Vue Router warn]: No match found for location with path "/_nuxt/@plugin-vuetify/lib/components/VToolbar/VToolbar.sass"
[Vue Router warn]: No match found for location with path "/_nuxt/@plugin-vuetify/lib/components/VToolbar/VToolbar.sass"
[Vue Router warn]: No match found for location with path "/_nuxt/@plugin-vuetify/lib/components/VBtn/VBtn.sass"
[Vue Router warn]: No match found for location with path "/_nuxt/@plugin-vuetify/lib/components/VBtn/VBtn.sass"
[Vue Router warn]: No match found for location with path "/_nuxt/@plugin-vuetify/lib/components/VBtn/VBtn.sass"
[Vue Router warn]: No match found for location with path "/_nuxt/@plugin-vuetify/lib/components/VBtn/VBtn.sass"
[Vue Router warn]: No match found for location with path "/_nuxt/@plugin-vuetify/lib/components/VBtnGroup/VBtnGroup.sass"
[Vue Router warn]: No match found for location with path "/_nuxt/@plugin-vuetify/lib/components/VBtnGroup/VBtnGroup.sass"
[Vue Router warn]: No match found for location with path "/_nuxt/@plugin-vuetify/lib/components/VBtnGroup/VBtnGroup.sass"
[Vue Router warn]: No match found for location with path "/_nuxt/@plugin-vuetify/lib/components/VBtnGroup/VBtnGroup.sass"
[Vue Router warn]: No match found for location with path "/_nuxt/@plugin-vuetify/lib/components/VIcon/VIcon.sass"
[Vue Router warn]: No match found for location with path "/_nuxt/@plugin-vuetify/lib/components/VIcon/VIcon.sass"
[Vue Router warn]: No match found for location with path "/_nuxt/@plugin-vuetify/lib/components/VIcon/VIcon.sass"
[Vue Router warn]: No match found for location with path "/_nuxt/@plugin-vuetify/lib/components/VIcon/VIcon.sass"
[Vue Router warn]: No match found for location with path "/_nuxt/@plugin-vuetify/lib/components/VResponsive/VResponsive.sass"
... many more components :)

Just thought I'd document it, it's not really causing any issues (as far as I can tell). Almost seems its the same issue we had to patch in the nitro response, except now its in vue router...

[userquin]

@daniandl we're checking what's the change in Nuxt, it is working properly in 3.8.0

[userquin]

@daniandl I'm going to release a new minor (breaking) updating to latest Nuxt (3.8.1), @nuxt/kit (2.8.1), Vite (4.5.0) and Vuetify (3.4), it seems there are some internal breaking changes in Nuxt (I guess it is about types), tests on my local works without any sass router warnings/errors (dev tools still with /@vite/client warnings/errors)

EDIT: seems to be there when using Node 18, on my local using Node 20.9.0 , cannot reproduce it (here an SB repro, using Node 18: https://stackblitz.com/edit/userquin-vuetify-nuxt-module-wzhs9k?file=playground%2Fnuxt.config.mts)

[TouchSek]

Same issue.

[userquin]

The next minor will not solve the error (linked PR): https://github.com/nuxt/cli/issues/188

[hermes85pl]

For me, when using Node v20.15.0, with this module in version 0.15.2 the issue is not present, and I do experience it after switching to 0.16.1 (having all the other dependencies in the latest version).

[userquin]

can you try using latest 0.18.2 replacing sass with sass-embedded (1.77.8)? it would be better to update also to latest Nuxt 3.13.* and Vite 5.4.3 (maybe you need to use resolutions or overrides in your package.json for Vite) that solves a lot of sass issues: the issue is about the sass resolver.

You can check https://github.com/vuetifyjs/vuetify-loader/pull/338, there are links to 2 PR with custom Vite plugin and custom Nuxt module (using SASS variables with and without SSR), checkout the corresponding branch (logic missing in main branch in both repositories)

[hermes85pl]

When I update to 0.18.2, I get other error instead, upon loading a page from the dev server (anonymized):

[8:15:20 PM]  ERROR  Internal server error: [sass] Error: ENOENT: no such file or directory, open '/.../node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vuetify/lib/styles/main.sass?direct'
  ╷
2 │ @use "file:///.../node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vuetify/lib/styles/main.sass%3Fdirect"
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  file:///@vuetify-styles/lib/styles/main.sass 2:1  root stylesheet
  Plugin: vite:css
  File: /@vuetify-styles/lib/styles/main.sass:2:1
  Error: Error: ENOENT: no such file or directory, open '/.../node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vuetify/lib/styles/main.sass?direct'
    ╷
  2 │ @use "file:///.../node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vuetify/lib/styles/main.sass%3Fdirect"
    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    file:///@vuetify-styles/lib/styles/main.sass 2:1  root stylesheet
      at handleCompileResponse (/.../node_modules/.pnpm/[email protected]/node_modules/sass-embedded/lib/src/compiler/utils.ts:221:11)
      at AsyncCompiler.compileRequestAsync (/.../node_modules/.pnpm/[email protected]/node_modules/sass-embedded/lib/src/compiler/async.ts:136:33)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at compileStringAsync (/.../node_modules/.pnpm/[email protected]/node_modules/sass-embedded/lib/src/compile.ts:54:12)


 WARN  [Vue Router warn]: No match found for location with path "/_nuxt/@vuetify-styles/lib/styles/main.sass"

I am not willing to experiment with resolutions or overrides to stay on the edge; instead, I will wait for things to stabilize and update in a normal way, so for now I am sticking to 0.15.2.

[userquin]

Try removing the node_modules/.vite folder beware it is .vite not vite or run pnpm dedupe.

[hermes85pl]

This was after a clean installation, without .vite there; pnpm dedupe did not help either.

[userquin]

@hermes85pl is your repo public? If not, can you provide the nuxt config file?

[theAvocadoCoder]

I've also encountered this issue, using Nuxt 3.13.1 and vuetify-nuxt-module 0.18.2 ( and Node 20.15.1)

I got a lot of Vue Router warnings for all the Vuetify components I use in the app and ENOENT errors for the components' Sass files. Setting nuxt to 3.10.0 and vuetify-nuxt-module to 0.15.2 got rid of the server log errors as far as I can tell but there are still errors in my console when I open dev tools on my browser.

I'm open to troubleshooting this so I've made a branch in my project with the modules set to their latest versions. I've tried replacing sass with sass-embedded and also used overrides to set vite to 5.4.3. That didn't change the errors I was getting. I should note that I'm very new to Nuxt and have not worked extensively with Sass either.

I've made my repo public.

[userquin]

@theAvocadoCoder I'm going to do some changes:

• write sass files to temporary files, will solve all the problems
• update logic to always configure the modern SASS compiler: right now using Vite defaults when Vite >= 5.4.2

I'll test your repo with pkg-pr-new from the new PR I'm preparing, I hope release v0.18.3 today once tested.

NOTE: I cannot use npm in your repo, getting weird error about rollup binary, I'm testing it with pnpm on my local.

[userquin]

@theAvocadoCoder seems to be working now, these are the dependencies (vuetify-nuxt-module from this PR https://github.com/vuetifyjs/nuxt-module/pull/278, tested on Nuxt 3.13.1 and 3.12.4).

can you update your vnm-troubleshoot dependencies and check it :pray:?

"dependencies": {
    "@nuxt/devtools": "^1.3.14",
    "@pinia/nuxt": "^0.5.4",
    "mongodb": "6.8",
    "nuxt": "^3.13.1",
    "pinia": "^2.2.2",
    "vite": "^5.4.5",
    "vue": "latest",
    "vuetify": "^3.7.1"
  },
  "devDependencies": {
    "@nuxtjs/tailwindcss": "^6.12.1",
    "sass-embedded": "^1.78.0",
    "vuetify-nuxt-module": "https://pkg.pr.new/vuetify-nuxt-module@278"
  },
  "overrides": {
    "vue": "latest",
    "vite": "^5.4.5"
  }

[theAvocadoCoder]

I'm not sure why the npm error happened, I use npm on my local. I've tested and this works. No errors or warnings related to the module in my browser console or the server logs and the styles are loading as they should. Thanks!

[userquin]

@theAvocadoCoder thx, releasing v0.18.3, I'll ping you here when released

[userquin]

@theAvocadoCoder v0.18.3 released, change the vuetify-nuxt-module to ^0.18.3 and install dependencies, should be fixed

[theAvocadoCoder]

Yup! It is. Thankss

[TechAkayy]

Just a note, I was able to avoid the npm error by adding the package throwing error as an optionalDependencies in my package.json, something to do with npm itself.

  "optionalDependencies": {
    "@rollup/rollup-darwin-arm64": "*"
  }

[daniandl]

I can't reproduce this anymore with 0.18.3, Vite 5.4.10 and:

- Operating System: `Darwin`
- Node Version:     `v20.17.0`
- Nuxt Version:     `3.13.2`
- CLI Version:      `3.15.0`
- Nitro Version:    `2.9.7`
- Package Manager:  `[email protected]`

So I will close this for now :)