search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
83.94k stars 9.21k forks source link

[Bug]: Failed to run on sveltekit monorepo(pnpm workspace) #23777

Open ryoppippi opened 1 year ago

ryoppippi commented 1 year ago

Describe the bug

I got error with sveltekit+pnpm monorepo

To Reproduce

pnpx create-turbo@latest -e with-svelte turbo
cd turbo/apps/web
pnpx storybook@latest init -y

And you got error like

> web@0.0.0 storybook /private/tmp/turbo/apps/web
> storybook dev -p 6006 "--quiet"

@storybook/cli v7.2.2

info => Starting manager..
The following Vite config options will be overridden by SvelteKit:
  - base

ERR! Error: We've detected a SvelteKit project using the @storybook/svelte-vite framework, which is not supported in Storybook 7.0
ERR! Please use the @storybook/sveltekit framework instead.
ERR! You can migrate automatically by running
ERR!
ERR! npx storybook@latest automigrate
ERR!
ERR! See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#sveltekit-needs-the-storybooksveltekit-framework
ERR!     at handleSvelteKit (/private/tmp/turbo/node_modules/.pnpm/@storybook+svelte-vite@7.2.2_svelte@3.58.0_typescript@4.9.5_vite@4.2.1/node_modules/@storybook/svelte-vite/dist/preset.js:1:1635)
ERR!     at async viteFinal (/private/tmp/turbo/node_modules/.pnpm/@storybook+svelte-vite@7.2.2_svelte@3.58.0_typescript@4.9.5_vite@4.2.1/node_modules/@storybook/svelte-vite/dist/preset.js:9:2478)
ERR!     at async Object.viteFinal (/private/tmp/turbo/node_modules/.pnpm/@storybook+sveltekit@7.2.2_svelte@3.58.0_typescript@4.9.5_vite@4.2.1/node_modules/@storybook/sveltekit/dist/preset.js:1:1319)
ERR!     at async createViteServer (/private/tmp/turbo/node_modules/.pnpm/@storybook+builder-vite@7.2.2_typescript@4.9.5_vite@4.2.1/node_modules/@storybook/builder-vite/dist/index.js:159:10530)
ERR!     at async Module.start (/private/tmp/turbo/node_modules/.pnpm/@storybook+builder-vite@7.2.2_typescript@4.9.5_vite@4.2.1/node_modules/@storybook/builder-vite/dist/index.js:159:12527)
ERR!     at async storybookDevServer (/private/tmp/turbo/node_modules/.pnpm/@storybook+core-server@7.2.2/node_modules/@storybook/core-server/dist/index.js:113:7873)
ERR!     at async buildDevStandalone (/private/tmp/turbo/node_modules/.pnpm/@storybook+core-server@7.2.2/node_modules/@storybook/core-server/dist/index.js:128:2872)
ERR!     at async withTelemetry (/private/tmp/turbo/node_modules/.pnpm/@storybook+core-server@7.2.2/node_modules/@storybook/core-server/dist/index.js:113:3630)
ERR!     at async dev (/private/tmp/turbo/node_modules/.pnpm/@storybook+cli@7.2.2/node_modules/@storybook/cli/dist/generate.js:457:401)
ERR!     at async Command.<anonymous> (/private/tmp/turbo/node_modules/.pnpm/@storybook+cli@7.2.2/node_modules/@storybook/cli/dist/generate.js:459:225)
ERR!  Error: We've detected a SvelteKit project using the @storybook/svelte-vite framework, which is not supported in Storybook 7.0
ERR! Please use the @storybook/sveltekit framework instead.
ERR! You can migrate automatically by running
ERR!
ERR! npx storybook@latest automigrate
ERR!
ERR! See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#sveltekit-needs-the-storybooksveltekit-framework
ERR!     at handleSvelteKit (/private/tmp/turbo/node_modules/.pnpm/@storybook+svelte-vite@7.2.2_svelte@3.58.0_typescript@4.9.5_vite@4.2.1/node_modules/@storybook/svelte-vite/dist/preset.js:1:1635)
ERR!     at async viteFinal (/private/tmp/turbo/node_modules/.pnpm/@storybook+svelte-vite@7.2.2_svelte@3.58.0_typescript@4.9.5_vite@4.2.1/node_modules/@storybook/svelte-vite/dist/preset.js:9:2478)
ERR!     at async Object.viteFinal (/private/tmp/turbo/node_modules/.pnpm/@storybook+sveltekit@7.2.2_svelte@3.58.0_typescript@4.9.5_vite@4.2.1/node_modules/@storybook/sveltekit/dist/preset.js:1:1319)
ERR!     at async createViteServer (/private/tmp/turbo/node_modules/.pnpm/@storybook+builder-vite@7.2.2_typescript@4.9.5_vite@4.2.1/node_modules/@storybook/builder-vite/dist/index.js:159:10530)
ERR!     at async Module.start (/private/tmp/turbo/node_modules/.pnpm/@storybook+builder-vite@7.2.2_typescript@4.9.5_vite@4.2.1/node_modules/@storybook/builder-vite/dist/index.js:159:12527)
ERR!     at async storybookDevServer (/private/tmp/turbo/node_modules/.pnpm/@storybook+core-server@7.2.2/node_modules/@storybook/core-server/dist/index.js:113:7873)
ERR!     at async buildDevStandalone (/private/tmp/turbo/node_modules/.pnpm/@storybook+core-server@7.2.2/node_modules/@storybook/core-server/dist/index.js:128:2872)
ERR!     at async withTelemetry (/private/tmp/turbo/node_modules/.pnpm/@storybook+core-server@7.2.2/node_modules/@storybook/core-server/dist/index.js:113:3630)
ERR!     at async dev (/private/tmp/turbo/node_modules/.pnpm/@storybook+cli@7.2.2/node_modules/@storybook/cli/dist/generate.js:457:401)
ERR!     at async Command.<anonymous> (/private/tmp/turbo/node_modules/.pnpm/@storybook+cli@7.2.2/node_modules/@storybook/cli/dist/generate.js:459:225)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

✔ Would you like to help improve Storybook by sending anonymous crash reports? … yes
 ELIFECYCLE  Command failed with exit code 1.

System

pnpm: 8.6.3
node: v18.16.0

Additional context

No response

ryoppippi commented 1 year ago

OK, I found a solution. .storybook/main.ts

import type { StorybookConfig } from '@storybook/sveltekit';

import { join, dirname } from 'path';

/**
 * This function is used to resolve the absolute path of a package.
 * It is needed in projects that use Yarn PnP or are set up within a monorepo.
 */
function getAbsolutePath(value: string): any {
  return dirname(require.resolve(join(value, 'package.json')));
}
const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    getAbsolutePath('@storybook/addon-links'),
    getAbsolutePath('@storybook/addon-essentials'),
    getAbsolutePath('@storybook/addon-interactions')
  ],
  framework: {
-    name: getAbsolutePath('@storybook/sveltekit'),
+   name: '@storybook/sveltekit',
    options: {}
  },
  docs: {
    autodocs: 'tag'
  }
};
export default config;

But I think the auto integration should be fixed

hugotox commented 12 months ago

Got the same issue and can confirm the suggested change worked!

jobnbackpack commented 7 months ago

Noticed that this issue probably has to do with the Windows file system, but I'm not sure. I set up a pnpm workspace in my wsl and had no problems, but my co-worker working on Windows got this issue. Thanks to this issue we have a workaround.

ryoppippi commented 7 months ago

@jobnbackpack this happened on my MacBook btw

jobnbackpack commented 3 months ago

We just upgraded to Storybook 8 and got the same issue from the migration? Any news on this problem?