storybook-nuxt icon indicating copy to clipboard operation
storybook-nuxt copied to clipboard

Issue with Vuetify treeshaking

Open melodyogonna opened this issue 1 year ago • 2 comments

Environment:

  • Operating System: Darwin
  • Node Version: v20.3.1
  • Nuxt Version: 3.6.5
  • Nitro Version: 2.5.2
  • Package Manager: [email protected]
  • Builder: vite
  • User Config: css, app, build, modules, runtimeConfig, typescript, hooks
  • Runtime Modules: @pinia/[email protected], @nuxt/[email protected]
  • Build Modules: -

Issue: I'm encountering a problem while trying to load vite-plugin-vuetify, to enable treeshaking in vuetify.

RR! Error: Vuetify plugin must be loaded after the vue plugin
ERR!     at configResolved (/Users/melody/projects/bifarinfarms/bifarm-frontend/node_modules/vite-plugin-vuetify/dist/importPlugin.js:19:23)
ERR!     at file:///Users/melody/projects/bifarinfarms/bifarm-frontend/node_modules/vite/dist/node/chunks/dep-439026c8.js:65802:28
ERR!     at Array.map (<anonymous>)
ERR!     at resolveConfig (file:///Users/melody/projects/bifarinfarms/bifarm-frontend/node_modules/vite/dist/node/chunks/dep-439026c8.js:65802:14)
ERR!     at async _createServer (file:///Users/melody/projects/bifarinfarms/bifarm-frontend/node_modules/vite/dist/node/chunks/dep-439026c8.js:64808:2
0)
ERR!     at async Module.start (/Users/melody/projects/bifarinfarms/bifarm-frontend/node_modules/@storybook/builder-vite/dist/index.js:159:12527)

Relevant Nuxt Config section:

{
... // Other config
  hooks: {
    "vite:extendConfig": (config: any) => {
      if (config.plugins) {
        config.plugins.push(vuetify());
      }

    },
  },

}

If it helps, here is the error source, I have not been able to find whether I can manually set this vite-vue-plugin myself, it seems to me like nuxi loads it but Storybooks doesn't.

function importPlugin() {
    return {
        name: 'vuetify:import',
        configResolved(config) {
            if (config.plugins.findIndex(plugin => plugin.name === 'vuetify:import') < config.plugins.findIndex(plugin => plugin.name === 'vite:vue')) {
                throw new Error('Vuetify plugin must be loaded after the vue plugin');
            }
        },
  }
}

melodyogonna avatar Aug 09 '23 22:08 melodyogonna