[Bug]: error in Vue 3 (& Nuxt 3) with Storybook v8

[Archetipo95]

Describe the bug

RollupError: [vite:build-import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.

To Reproduce

I migrated a working Storybook from latest v7 to latest v8

System

No response

Additional context

No response

[vanessayuenn]

Hi, thanks for reporting this. do you have a reproduction repo you can share? If not, can you please create one via storybook.new? We prioritize bug reports that have reproduction. Thank you! 🙏

[Archetipo95]

Here it is!
This is a Pull request with the updated Storybook v8: Archetipo95/my-nuxt-starter#95
And on main branch you can find my Nuxt starter with working Storybook v7: https://github.com/Archetipo95/my-nuxt-starter

This is the Storybook v7 deploy: https://my-nuxt-starter-storybook.netlify.app/

[shoeyn]

Had similar issue with project which has a differently named vite.config.js.
Because of this it doesn't merge the configuration to include the vite vue plugin.
In the .storybook/main.js|ts you need to add:

import vue from '@vitejs/plugin-vue'

const config: StorybookConfig = {
  ...,
  async viteFinal(config) {
    // Merge custom configuration into the default config
    const { mergeConfig } = await import('vite');

    return mergeConfig(config, {
      plugins: [vue()],
    });
  },
}

[Archetipo95]

Yep I can confirm. I was just going to write the same fix @shoeyn suggested

[tfoxy]

Hi everyone! This happens because Storybook 8 doesn't add framework-specific plugins to Vite. This is mentioned in https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#framework-specific-vite-plugins-have-to-be-explicitly-added

You can create vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
});

or you can add the plugin in viteFinal as mentioned by @shoeyn. The difference is that the vite.config.js can also be used by vitest or to build a library. So viteFinal can be used as configuration that only applies to Storybook specifically.

[shoeyn]

It was a fresh install for me and I couldn't find any information on the matter in the docs as I didn't think to check the migration docs for a fresh install.
So I don't know whether a note in the docs for vite stating on projects with non-standard named vite config files will require the framework specific plugins to be registered in a standard named config file or merged in the manner I specified.

[tfoxy]

Oh yeah, it should be mentioned somewhere in the docs (e.g. https://storybook.js.org/docs/get-started/vue3-vite#troubleshooting). And also for the other frameworks.

[kasperpeulen]

cc @kylegach for the docs

[Archetipo95]

Should have been fixed here storybook-vue/storybook-nuxt@9d0b108