File 'virtual:/@storybook/builder-vite/vite-app.js' was not found in iframe.html

Using Vue 2

Error in console:

My Vite config:

const { createVuePlugin } = require('vite-plugin-vue2')
const path = require('path')
const { visualizer } = require('rollup-plugin-visualizer')


module.exports = {
    server: { middlewareMode: 'ssr' },
    plugins: [createVuePlugin(), visualizer({
        open: true
    })],
    resolve: {
        alias: [
            {
                find: '@',
                replacement: path.resolve(__dirname, 'src')
            },
        ]
    },
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `@import "@/assets/sass/global.scss";`
            }
        }
    },
    build: {
        rollupOptions: {
            output: {
                entryFileNames: '[name].[hash].js'
            }
        }
    }
}

My Storybook main.js:

 const viteConfig = require('../vite.config')

module.exports = {
  stories: [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-a11y",
  ],
  core: { builder: "storybook-builder-vite" },
  async viteFinal() {
    return viteConfig
  }
}

[ThinCats]

If you want to reuse your project’s vite config, you should not just directly return it. Because it will override the configuration that builder-vite uses, which contains plugin handling virtual module vite-app.js. You can use mergeConfig provided by vite to merge configs, see https://github.com/eirslett/storybook-builder-vite/issues/85#issuecomment-900831050

[shakhzodkudratov]

guys check this discussion for a workaround, it might be useful for you https://github.com/storybookjs/builder-vite/issues/367#issuecomment-1116892668