storybook-nuxt
storybook-nuxt copied to clipboard
Issue with Vuetify treeshaking
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');
}
},
}
}