Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Storybook does not work with SvelteKit #30008

Open
jerrythomas opened this issue Dec 10, 2024 · 0 comments
Open

[Bug]: Storybook does not work with SvelteKit #30008

jerrythomas opened this issue Dec 10, 2024 · 0 comments

Comments

@jerrythomas
Copy link

Describe the bug

Storybook does not run or build with a starter project created using SvelteKit sv create

  • Same problem occurs in js and ts mode.

Reproduction link

https://github.com/jerrythomas/repro-sveltekit-storybook/tree/main

Reproduction steps

  • create repo using npx sv create
    • select option to include storybook demo
  • pnpm storybook
pnpm storybook

> [email protected] storybook /Users/Jerry/Developer/svelte-kit-js
> storybook dev -p 6006

@storybook/core v8.4.7

SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: ./.storybook/main.js.

Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes.

If you believe this is a bug, please open an issue on Github.

SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: ./node_modules/.pnpm/@[email protected]_@[email protected][email protected]_prettier@3._6qdorkd3udyipaxdzmyhkuxaka/node_modules/@storybook/addon-svelte-csf/dist/preset.js.

Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes.

If you believe this is a bug, please open an issue on Github.

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import './node_modules/.pnpm/@[email protected]_@[email protected][email protected]_prettier@3._6qdorkd3udyipaxdzmyhkuxaka/node_modules/@storybook/addon-svelte-csf/dist/compiler/post-transform/story' is not supported resolving ES modules imported from ./node_modules/.pnpm/@[email protected]_@[email protected][email protected]_prettier@3._6qdorkd3udyipaxdzmyhkuxaka/node_modules/@storybook/addon-svelte-csf/dist/compiler/post-transform/index.js
    at finalizeResolution (node:internal/modules/esm/resolve:263:11)
    at moduleResolve (node:internal/modules/esm/resolve:932:10)
    at defaultResolve (node:internal/modules/esm/resolve:1056:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:654:12)
    at #cachedDefaultResolve (node:internal/modules/esm/loader:603:25)
    at ModuleLoader.getModuleJobForRequire (node:internal/modules/esm/loader:353:53)
    at new ModuleJobSync (node:internal/modules/esm/module_job:341:34)
    at ModuleLoader.getModuleJobForRequire (node:internal/modules/esm/loader:413:11)
    at new ModuleJobSync (node:internal/modules/esm/module_job:341:34)
    at ModuleLoader.getModuleJobForRequire (node:internal/modules/esm/loader:413:11)

More info:

    at loadPreset (./node_modules/.pnpm/@[email protected][email protected]/node_modules/@storybook/core/dist/common/index.cjs:16477:13)

More info:

    at loadPreset (./node_modules/.pnpm/@[email protected][email protected]/node_modules/@storybook/core/dist/common/index.cjs:16477:13)
    at async Promise.all (index 1)
    at async loadPresets (./node_modules/.pnpm/@[email protected][email protected]/node_modules/@storybook/core/dist/common/index.cjs:16487:55)
    at async getPresets (./node_modules/.pnpm/@[email protected][email protected]/node_modules/@storybook/core/dist/common/index.cjs:16520:11)
    at async buildDevStandalone (./node_modules/.pnpm/@[email protected][email protected]/node_modules/@storybook/core/dist/core-server/index.cjs:37145:11)
    at async withTelemetry (./node_modules/.pnpm/@[email protected][email protected]/node_modules/@storybook/core/dist/core-server/index.cjs:35757:12)
    at async dev (./node_modules/.pnpm/@[email protected][email protected]/node_modules/@storybook/core/dist/cli/bin/index.cjs:2591:3)
    at async s.<anonymous> (./node_modules/.pnpm/@[email protected][email protected]/node_modules/@storybook/core/dist/cli/bin/index.cjs:2643:74)

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

WARN   Failed to load preset: {"type":"presets","name":"/Users/Jerry/Developer/svelte-kit-js/node_modules/.pnpm/@[email protected]_@[email protected][email protected]_prettier@3._6qdorkd3udyipaxdzmyhkuxaka/node_modules/@storybook/addon-svelte-csf/dist/preset.js"} on level 1
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import './node_modules/.pnpm/@[email protected]_@[email protected][email protected]_prettier@3._6qdorkd3udyipaxdzmyhkuxaka/node_modules/@storybook/addon-svelte-csf/dist/compiler/post-transform/story' is not supported resolving ES modules imported from ./node_modules/.pnpm/@[email protected]_@[email protected][email protected]_prettier@3._6qdorkd3udyipaxdzmyhkuxaka/node_modules/@storybook/addon-svelte-csf/dist/compiler/post-transform/index.js
    at finalizeResolution (node:internal/modules/esm/resolve:263:11)
    at moduleResolve (node:internal/modules/esm/resolve:932:10)
    at defaultResolve (node:internal/modules/esm/resolve:1056:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:654:12)
    at #cachedDefaultResolve (node:internal/modules/esm/loader:603:25)
    at ModuleLoader.getModuleJobForRequire (node:internal/modules/esm/loader:353:53)
    at new ModuleJobSync (node:internal/modules/esm/module_job:341:34)
    at ModuleLoader.getModuleJobForRequire (node:internal/modules/esm/loader:413:11)
    at new ModuleJobSync (node:internal/modules/esm/module_job:341:34)
    at ModuleLoader.getModuleJobForRequire (node:internal/modules/esm/loader:413:11)
 ELIFECYCLE  Command failed with exit code 1.

System

Storybook Environment Info:

  System:
    OS: macOS 15.2
    CPU: (16) arm64 Apple M4 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.12.0 - ~/.nvm/versions/node/v22.12.0/bin/node
    npm: 10.9.0 - ~/.nvm/versions/node/v22.12.0/bin/npm
    pnpm: 9.14.4 - /opt/homebrew/bin/pnpm <----- active
  Browsers:
    Chrome: 131.0.6778.109
    Safari: 18.2
  npmPackages:
    @storybook/addon-essentials: ^8.4.7 => 8.4.7
    @storybook/addon-interactions: ^8.4.7 => 8.4.7
    @storybook/addon-svelte-csf: ^5.0.0-next.14 => 5.0.0-next.14
    @storybook/blocks: ^8.4.7 => 8.4.7
    @storybook/svelte: ^8.4.7 => 8.4.7
    @storybook/sveltekit: ^8.4.7 => 8.4.7
    @storybook/test: ^8.4.7 => 8.4.7
    storybook: ^8.4.7 => 8.4.7

Additional context

No response

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant