storybookjs/storybook

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

Open

#23,777 opened on Aug 9, 2023

View on GitHub
 (7 comments) (0 reactions) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
automigrationsbughas workaroundhelp wantedsev:S3sveltekitupgrade:7.x

Description

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

Contributor guide

Tech stack
sveltetypescriptvitenodejs
Domain
developer experiencetoolingfrontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
SvelteKitStorybookmonorepo with pnpm workspaces
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65
Research direction
Investigate the handleSvelteKit function in @storybook/svelte vite's preset.js. The current detection may fail when SvelteKit is used in a monorepo with pnpm workspaces. Check if there is a way to detect SvelteKit more robustly, perhaps by looking for package.json dependencies or the svelte.config.js file. Also review the migration guide linked in the error to ensure compatibility. Consider adding a check for the presence of @sveltejs/kit in dependencies.