Plugin Does not work with Storybook 8

[ms2d]

Here are the steps to create a test projects:

npm init vite@latest storybook-vue -- --template vue
cd storybook-vue
npm install
npx storybook@latest init
npm install --save-dev storybook-vue-addon

Then, following the instructions, I replace main.js with

/** @type { import('@storybook/vue3-vite').StorybookConfig } */
const config = {
  stories: [
    '../src/**/*.mdx',
     '../src/**/*.stories.@(js|jsx|mjs|ts|tsx|vue)'
  ],
  addons: [
    '@storybook/addon-onboarding', 
    '@storybook/addon-links', 
    '@storybook/addon-essentials', 
    '@chromatic-com/storybook', 
    '@storybook/addon-interactions', 
    'storybook-vue-addon'
  ],
  framework: {
    name: '@storybook/vue3-vite',
    options: {},
  },
};
export default config;

I then create Button.stories.vue in src/stories with the following:

<script setup>
  import Button from './Button.vue'
</script>

<template>
  <Stories
    title="Stories in Vue format 😍"
    :component="Button"
  >
    <Story title="Primary">
      <Button
        background="#ff0"
        label="Button"
      />
    </Story>
    <Story title="Secondary">
      <Button
        background="#ff0"
        label="😄👍😍💯"
      />
    </Story>
    <Story title="Tertiary">
      <Button
        background="#ff0"
        label="📚📕📈🤓"
      />
    </Story>
  </Stories>
</template>

vite.config.js looks like this:

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  base: '',
  server: {
    open: true,
    host: true,
  },
});

I then run npm run storybook I get the following error:

Error:   Failed to scan for dependencies from entries:
  /workspaces/dev/tests/storybook-vue/src/stories/Button.stories.js
/workspaces/dev/tests/storybook-vue/src/stories/Button.stories.vue
/workspaces/dev/tests/storybook-vue/src/stories/Header.stories.js
/workspaces/dev/tests/storybook-vue/src/stories/Page.stories.js

  ✘ [ERROR] Do not know how to load path: html:/workspaces/dev/tests/storybook-vue/src/stories/Button.stories.vue?vue&type=stories

    <stdin>:2:7:
      2 │ import "/workspaces/dev/tests/storybook-vue/src/stories/Button.stor...
        ╵        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Any ideas?

[tobiasdiez]

Duplicate of #103, and should hopefully be fixed with storybookjs/storybook#28941