[Bug] vue3 - vite-builder - @storybook/core/client has no export named 'start

[samydoesit]

Describe the bug

We are using a pnpm monorepo and are having some issues using latest storybook alpha.
When i updated to storybook 6.5.0-alpha.52 i am getting a strange runtime error like this:

Uncaught SyntaxError: The requested module '/node_modules/@storybook/vue3/node_modules/@storybook/core/client.js?v=eca4d6ea' does not provide an export named 'start'

"@storybook/addon-docs": "^6.5.0-alpha.52",
"@storybook/addon-essentials": "^6.5.0-alpha.52",
"@storybook/addon-postcss": "^2.0.0",
"@storybook/core-common": "^6.5.0-alpha.52",
"@storybook/vue3": "^6.5.0-alpha.52",
"storybook-builder-vite": "^0.1.22",

Steps to reproduce the behavior

I made a branch for testing https://github.com/samydoesit/vue-turbo-starter/tree/storybook-6.5.0-alpha

run following commands:

pnpm i
pnpm dev -F storybook

Expected behavior

Storybook runtime shouldn't raise any errors.

Screenshots and/or logs

Environment

• OS: macOS
• Node.js version: v16.13.0
• PNPM version: 6.32.3
• Browser [chrome]
• Browser version [latest]

[dpschen]

I had the same issue. I was able to work around by setting an alias from @storybook/core/client to @storybook/core-client in the .storybook/main.js.

const { loadConfigFromFile, mergeConfig } = require("vite");
const path = require('path')

// [...]

async viteFinal(config, { configType }) {
    // https://github.com/cafebazaar/emroozjs/blob/master/.storybook/main.js
    const { config: userConfig } = await loadConfigFromFile(
        path.resolve(__dirname, "../vite.config.ts")
    );

    return mergeConfig(config, {
        ...userConfig,

        // see: https://github.com/storybookjs/builder-vite/issues/298#issuecomment-1087405464
        resolve: {
            ...userConfig.resolve,
            alias: [
                {
                    find: "@storybook/core/client",
                    replacement: "@storybook/core-client",
                },
                /* https://v3.vuejs.org/guide/installation.html#for-server-side-rendering */
                {
                    find: "vue",
                    replacement: path.resolve(__dirname, "../node_modules/vue/dist/vue.esm-bundler.js"),
                },
            ],
        },

        // manually specify plugins to avoid conflict
        plugins: [],
    });
},

I got the idea from:
storybookjs/builder-vite#298 (comment)

[samydoesit]

I tried this again with latest storybook deps ^6.5.0-alpha.56 and now it works.