storybookjs / builder-vite

A builder plugin to run and build Storybooks with Vite
MIT License
891 stars 107 forks source link

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

Closed nadirabbas closed 3 years ago

nadirabbas commented 3 years ago

Using Vue 2

Error in console: image

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
  }
}
IanVS commented 3 years ago

Vue 2 is not yet supported. There's an open PR (https://github.com/eirslett/storybook-builder-vite/pull/66) to add support.

ThinCats commented 3 years ago

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

elzodxon commented 2 years ago

[vite] Internal server error: No files matching '/virtual:/@storybook/builder-vite/vite-app.js' were found. Vite throwing this error

IanVS commented 2 years ago

@elzodxon please open a new issue with all of the details in the template.

shakhzodkudratov commented 2 years ago

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