search

vuetifyjs / vuetify-loader

📦 Webpack and Vite plugins for treeshaking Vuetify components and more
https://vuetifyjs.com/customization/a-la-carte#vuetify-loader
MIT License
516 stars 91 forks source link

[vite-plugin] vuetify:styles fallback timeout hit #249

Closed throrin19 closed 2 years ago

throrin19 commented 2 years ago

Hello,

I have an error that appears quickly, but not all the time, related to the CSS of vuetify. It seems to appear whenever I try to customize the vuetify variables. Without it, it never seems to come up for me.

This is the console error : 

vuetify:styles fallback timeout hit {
  blockingModules: [
    '/path/to/project/src/styles/main.scss'
  ],
  pendingModules: [
    '/path/to/project/src/main.js',
    '/path/to/project/node_modules/.vite/deps/vue.js?v=d25f376f',
    '/path/to/project/node_modules/.vite/deps/vuetify_lib_components_VApp_index_mjs.js?v=1a808698',
    '/path/to/project/node_modules/.vite/deps/vue-router.js?v=d25f376f',
    '/path/to/project/node_modules/.vite/deps/lodash_map.js?v=d25f376f',
    '/path/to/project/node_modules/.vite/deps/lodash_omit.js?v=d25f376f',
    '/path/to/project/node_modules/.vite/deps/vue-i18n.js?v=d25f376f',
    '/path/to/project/node_modules/.vite/deps/@vee-validate_i18n.js?v=d25f376f',
    '/path/to/project/node_modules/.vite/deps/vuetify_locale.js?v=d25f376f',
    '/path/to/project/node_modules/.vite/deps/pinia.js?v=d25f376f',
    '/path/to/project/node_modules/.vite/deps/pinia-plugin-persistedstate.js?v=d25f376f',
    '/path/to/project/node_modules/.vite/deps/pinia-shared-state.js?v=d25f376f',
    '/path/to/project/node_modules/.vite/deps/vee-validate.js?v=d25f376f',
    '/path/to/project/node_modules/.vite/deps/@vee-validate_rules.js?v=d25f376f',
    '/path/to/project/node_modules/.vite/deps/vuetify_locale_adapters_vue-i18n.js?v=d25f376f',
    '/path/to/project/node_modules/.vite/deps/vuetify.js?v=d25f376f',
    '/path/to/project/node_modules/.vite/deps/vue3-snackbar.js?v=d25f376f',
    '/path/to/project/node_modules/.vite/deps/mitt.js?v=d25f376f',
    '/path/to/project/node_modules/.vite/deps/webfontloader.js?v=d25f376f',
    '/path/to/project/node_modules/.vite/deps/lodash_get.js?v=d25f376f',
    '/path/to/project/node_modules/.vite/deps/lodash_merge.js?v=d25f376f',
    '/path/to/project/node_modules/.vite/deps/lodash_isEmpty.js?v=d25f376f',
    '/path/to/project/node_modules/.vite/deps/asdfgh.js?v=d25f376f',
    '/path/to/project/node_modules/.vite/deps/vuetify_lib_components_VBtn_index_mjs.js?v=9503d81e',
    '/path/to/project/node_modules/.vite/deps/vuetify_lib_components_VGrid_index_mjs.js?v=1ac273fa',
    '/path/to/project/node_modules/.vite/deps/vuetify_lib_components_VMain_index_mjs.js?v=e29b7080',
    '/path/to/project/node_modules/.vite/deps/vuetify_lib_components_VAppBar_index_mjs.js?v=c2d07f77',
    '/path/to/project/node_modules/.vite/deps/vuetify_lib_components_VToolbar_index_mjs.js?v=3cb60075',
    '/path/to/project/node_modules/.vite/deps/vuetify_lib_components_VProgressCircular_index_mjs.js?v=f51ecd93',
    '/path/to/project/node_modules/.vite/deps/perfect-scrollbar.js?v=d25f376f',
    '/path/to/project/node_modules/.vite/deps/vuetify_lib_components_VProgressLinear_index_mjs.js?v=e6633fb5',
    '/path/to/project/node_modules/.vite/deps/vuetify_lib_components_VTextField_index_mjs.js?v=be93407c',
    '/path/to/project/node_modules/.vite/deps/axios.js?v=d25f376f',
    '/path/to/project/node_modules/.vite/deps/lodash_dropWhile.js?v=d25f376f',
    '/path/to/project/node_modules/.vite/deps/@vueuse_core.js?v=d25f376f',
    '/path/to/project/node_modules/.vite/deps/chunk-JHYY2CSR.js?v=d21b2e94',
    '/path/to/project/node_modules/.vite/deps/chunk-X4JHCONW.js?v=d21b2e94',
    '/path/to/project/node_modules/.vite/deps/chunk-IZJDEWTN.js?v=d21b2e94',
    '/path/to/project/node_modules/.vite/deps/chunk-N3LJC3J4.js?v=d21b2e94',
    '/path/to/project/node_modules/.vite/deps/chunk-XGTVKGPM.js?v=d21b2e94',
    '/path/to/project/node_modules/.vite/deps/chunk-T2IPKKUY.js?v=d21b2e94',
    '/path/to/project/node_modules/.vite/deps/chunk-OIBODWRD.js?v=d21b2e94',
    '/path/to/project/node_modules/.vite/deps/chunk-VCMRB3AC.js?v=d21b2e94',
    '/path/to/project/node_modules/.vite/deps/chunk-F5QRXQOS.js?v=d21b2e94',
    '/path/to/project/node_modules/.vite/deps/chunk-GBY3VDR4.js?v=d21b2e94',
    '/path/to/project/node_modules/.vite/deps/chunk-7DDWA6HA.js?v=d21b2e94',
    '/path/to/project/node_modules/.vite/deps/chunk-ZJU3IRJB.js?v=d21b2e94',
    '/path/to/project/node_modules/.vite/deps/chunk-XB2S7G5T.js?v=d21b2e94',
    '/path/to/project/node_modules/.vite/deps/chunk-OXRDS67J.js?v=d21b2e94',
    '/path/to/project/node_modules/.vite/deps/chunk-IKZV3TUN.js?v=d21b2e94',
    '/path/to/project/node_modules/.vite/deps/chunk-3MUFMEBE.js?v=d21b2e94',
    '/path/to/project/node_modules/.vite/deps/chunk-WZCCRXSZ.js?v=d21b2e94',
    '/path/to/project/node_modules/.vite/deps/chunk-DRQS3WAC.js?v=d21b2e94',
    '/path/to/project/node_modules/.vite/deps/chunk-NDYHEJKM.js?v=d21b2e94',
    '/path/to/project/node_modules/.vite/deps/chunk-ZTCTAQAC.js?v=d21b2e94',
    '/path/to/project/node_modules/.vite/deps/chunk-VES46C4A.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/chunk-DOFAL23K.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/chunk-NDYHEJKM.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/chunk-NX75L7DU.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/chunk-3WERZAIV.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/chunk-WHJCUZTZ.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/chunk-X4JHCONW.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/chunk-IZJDEWTN.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/chunk-WUG7ESFF.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/chunk-FR65EHM4.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/chunk-44AD24ED.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/chunk-XSACIFCE.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/chunk-OFI3VRIN.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/chunk-FZLU7O52.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/chunk-HSBMJE7C.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/chunk-HHSC4KQI.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/chunk-AELEIHDV.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/chunk-2E3WEKP6.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/chunk-P7Y63HBI.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/chunk-7EYRMSSO.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/chunk-QGQMFRVI.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/axios.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/vue-i18n.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/vue.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/vuetify_lib_components_VProgressCircular_index_mjs.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/vuetify_lib_components_VAppBar_index_mjs.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/vuetify_lib_components_VMain_index_mjs.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/vuetify_lib_components_VToolbar_index_mjs.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/perfect-scrollbar.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/asdfgh.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/vuetify_lib_components_VProgressLinear_index_mjs.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/vuetify_lib_components_VTextField_index_mjs.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/vuetify_lib_components_VApp_index_mjs.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/vue-router.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/lodash_map.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/lodash_omit.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/@vee-validate_i18n.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/vuetify_locale.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/pinia.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/pinia-plugin-persistedstate.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/pinia-shared-state.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/vee-validate.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/@vee-validate_rules.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/vuetify_locale_adapters_vue-i18n.js?v=5549a14f',
    '/path/to/project/node_modules/.vite/deps/vuetify.js?v=5549a14f',
    ... 33 more items
  ]
}

This is my main.scss : 

@use './variables' as vars;

@use 'vuetify/styles' with (
  $body-font-family: vars.$aq-body-font-family,
  $heading-font-family: vars.$aq-heading-font-familly,
);

// our styles
@use './common';

this is my vite config : 

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vuetify from 'vite-plugin-vuetify';
import eslint from 'vite-plugin-eslint';
import svgLoader from 'vite-svg-loader';

const path = require('path');

// https://vitejs.dev/config/
export default defineConfig({
    server : {
        port : 4000,
    },
    plugins : [
        vue(),
        // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
        vuetify({
            autoImport  : true,
            styles      : 'expose',
        }),
        eslint(),
        svgLoader(),
    ],
    define  : { 'process.env' : {} },
    resolve : {
        alias : {
            '@' : path.resolve(__dirname, 'src'),
        },
    },
});

Versions

TechAkayy commented 2 years ago

Hi there,

Please see another reproduction here - https://stackblitz.com/github/TechAkayy/styles-expose?file=src%2Fmain.js

image

Thank you!

KaelWD commented 2 years ago

Not 100% sure if that'll fix it, lmk if it still happens or if you get missing styles now.