[vite-plugin] vuetify:styles fallback timeout hit

[TechAkayy]

Reopening issue https://github.com/vuetifyjs/vuetify-loader/issues/249 as the issue is still unresolved - styles fallback timeout hit issue. Installed vite-plugin-vuetify to latest.

Reproduction link: https://stackblitz.com/github/TechAkayy/styles-expose?file=src%2Fmain.js

Thanks in advance.

[matkg]

I had the same issue but it worked as soon as I used these specific package versions inside the package.json

"dependencies": {
...
    "vuetify": "3.0.0-beta.6"
}
"devDependencies": {
...
    "@vitejs/plugin-vue": "3.0.1",
    "vite": "3.0.4",
    "vite-plugin-vuetify": "1.0.0-alpha.14"
}

[charrierjc]

@matkg I still have the issue with the same packages versions as you. I dont really understand the issue, the build works fine locally in a WSL2, but not at all in the CI, in a docker with node alpine,

[emikoshi]

@charrierjc having the same issue as you when updating vite, viteje/plugin-vue and vite-plugin-vuetify.

"dependencies": {
...
    "vuetify": "3.0.0-beta.7"
}
"devDependencies": {
...
    "@vitejs/plugin-vue": "3.0.1",
    "vite": "3.0.5",
    "vite-plugin-vuetify": "1.0.0-alpha.14"
}

Exposing styles seems to be the culprit, current workaround I found is plugins: [vue(), vuetify()] instead of plugins: [vue(), vuetify({ styles: "expose" })] in your vite config.

[KaelWD]

The stackblitz link crashes with

Error [ERR_INTERNAL_ASSERTION]: Error [ERR_INTERNAL_ASSERTION]: TypeError: Cannot destructure property '0' of 'Ue(...)' as it is undefined.
    at formatIterator (https://jvmimllqa--github.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:6:108233)
    at https://jvmimllqa--github.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:6:102712
    at formatValue (https://jvmimllqa--github.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:6:103550)
    at formatProperty (https://jvmimllqa--github.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:6:108782)
    at https://jvmimllqa--github.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:6:102747
    at formatValue (https://jvmimllqa--github.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:6:103550)
    at inspect (https://jvmimllqa--github.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:6:92243)
    at formatWithOptionsInternal (https://jvmimllqa--github.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:6:115079)
    at formatWithOptions (https://jvmimllqa--github.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:6:116334)
    at console.value (https://jvmimllqa--github.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:6:1056319)

but then works fine if I run npm run dev again.

[TechAkayy]

Thanks @KaelWD for checking at your end.

I think since this is a "timeout" issue, it's usually a hit or miss depending on our individual development environment, and it's very random, but quite frequent at least at my end. I'm on:

• Macbook Pro 13 inch 2017, 3.1 GHz dual-core intel core i5, 8GB 2133 MHz LPDDR3
• macOS Monterey 12.5
• node v16.16.0
• npm v8.11.0
• Chrome Version 104.0.5112.79 (Official Build) (x86_64)

Stackblitz might not be a good place for reproducing this (due to the above crash issue). So, here are my github repos for anyone who wants to clone & check this out in your local environments and share what your experience.

https://github.com/TechAkayy/styles-expose https://github.com/TechAkayy/styles-expose-vite-3

I'm still experiencing the timeout issue when starting my dev-server, but when I don't get that issue and I change the sass variable $font-size-root and save, I get the other "variable was not declared with !default in the @used module" error (tracked here - https://github.com/vuetifyjs/vuetify-loader/issues/245, https://github.com/vuetifyjs/vuetify-loader/issues/221).

[funkyvisions]

I'm still experiencing this with webpack-plugin-vuetify: 2.0.0-alpha.12 (not vite). Mostly on our CI machine. This causes our build to be corrupt, as it appears certain Vuetify components aren't available when this occurs. If

pendingModules: [
    '/Users/mobiledev/build/wcmobile/src/styles/variables.scss',
    '/Users/mobiledev/build/wcmobile/src/styles/variables.scss'
]

is output, then I know it worked successfully. But if there are other pendingModules, then the build is corrupt. I'm adding a check into my CI build to fail when this happens.

[KaelWD]

The new configFile option will no longer have this problem, I highly recommend switching. Documentation is updated too: https://next.vuetifyjs.com/en/features/sass-variables/