search

sveltejs / cli

The Svelte CLI
MIT License
254 stars 9 forks source link

Storybook broken out of the box in latest version #295

Closed hansihe closed 4 days ago

hansihe commented 4 days ago

When trying to set up a SvelteKit project with the storybook option enabled, the project is broken out of the box.

npx sv --version
(node:303808) ExperimentalWarning: CommonJS module /usr/lib/node_modules/npm/node_modules/debug/src/node.js is loading ES Module /usr/lib/node_modules/npm/node_modules/supports-color/index.js using require().
Support for loading ES Module in require() is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
0.6.1

npx sv create test-app
(node:304086) ExperimentalWarning: CommonJS module /usr/lib/node_modules/npm/node_modules/debug/src/node.js is loading ES Module /usr/lib/node_modules/npm/node_modules/supports-color/index.js using require().
Support for loading ES Module in require() is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
┌  Welcome to the Svelte CLI! (v0.6.1)
│
◇  Which template would you like?
│  SvelteKit minimal
│
◇  Add type checking with Typescript?
│  Yes, using Typescript syntax
│
◆  Project created
│
◇  What would you like to add to your project? (use arrow keys / space bar)
│  storybook
│
◇  Which package manager do you want to install dependencies with?
│  npm
│
◇  Running external command (npx storybook@latest init --skip-install --no-dev)
(node:304169) ExperimentalWarning: CommonJS module /usr/lib/node_modules/npm/node_modules/debug/src/node.js is loading ES Module /usr/lib/node_modules/npm/node_modules/supports-color/index.js using require().
Support for loading ES Module in require() is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:304214) ExperimentalWarning: CommonJS module /usr/lib/node_modules/npm/node_modules/debug/src/node.js is loading ES Module /usr/lib/node_modules/npm/node_modules/supports-color/index.js using require().
Support for loading ES Module in require() is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
╭──────────────────────────────────────────────────────╮
│                                                      │
│   Adding Storybook version 8.4.2 to your project..   │
│                                                      │
╰──────────────────────────────────────────────────────╯
 • Detecting project type. ✓
 • Adding Storybook support to your "SvelteKit" appWARN An issue occurred while trying to find dependencies metadata using npm.

  ✔ Getting the correct version of 9 packages
  ✔ Installing Storybook dependencies
WARN An issue occurred while trying to find dependencies metadata using npm.
. ✓

attention => Storybook now collects completely anonymous telemetry regarding usage.
This information is used to shape Storybook's roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry

╭──────────────────────────────────────────────────────────────────────────────╮
│                                                                              │
│   Storybook was successfully installed in your project! 🎉                   │
│   To run Storybook manually, run npm run storybook. CTRL+C to stop.          │
│                                                                              │
│   Wanna know more about Storybook? Check out https://storybook.js.org/       │
│   Having trouble or want to chat? Join us at https://discord.gg/storybook/   │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯
│
◆  Successfully setup add-ons
│
◇  Successfully installed dependencies
│
◇  Project next steps ─────────────────────────────────────────────────────╮
│                                                                          │
│  1: cd test-app                                                          │
│  2: git init && git add -A && git commit -m "Initial commit" (optional)  │
│  3: npm run dev -- --open                                                │
│                                                                          │
│  To close the dev server, hit Ctrl-C                                     │
│                                                                          │
│  Stuck? Visit us at https://svelte.dev/chat                              │
│                                                                          │
├──────────────────────────────────────────────────────────────────────────╯
│
└  You're all set!

cd test-app/

ls
node_modules  package.json  package-lock.json  README.md  src  static  svelte.config.js  tsconfig.json  vite.config.ts
npm run storybook

> test-app@0.0.1 storybook
> storybook dev -p 6006

@storybook/core v8.4.2

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/@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/@storybook/addon-svelte-csf/dist/compiler/post-transform/story' is not supported resolving ES modules imported from ./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:650:12)
    at #cachedDefaultResolve (node:internal/modules/esm/loader:599:25)
    at ModuleLoader.getModuleJobForRequire (node:internal/modules/esm/loader:349:53)
    at new ModuleJobSync (node:internal/modules/esm/module_job:338:34)
    at ModuleLoader.getModuleJobForRequire (node:internal/modules/esm/loader:409:11)
    at new ModuleJobSync (node:internal/modules/esm/module_job:338:34)
    at ModuleLoader.getModuleJobForRequire (node:internal/modules/esm/loader:409:11)

More info:

    at loadPreset (./node_modules/@storybook/core/dist/common/index.cjs:16477:13)

More info:

    at loadPreset (./node_modules/@storybook/core/dist/common/index.cjs:16477:13)
    at async Promise.all (index 1)
    at async loadPresets (./node_modules/@storybook/core/dist/common/index.cjs:16487:55)
    at async getPresets (./node_modules/@storybook/core/dist/common/index.cjs:16520:11)
    at async buildDevStandalone (./node_modules/@storybook/core/dist/core-server/index.cjs:37145:11)
    at async withTelemetry (./node_modules/@storybook/core/dist/core-server/index.cjs:35757:12)
    at async dev (./node_modules/@storybook/core/dist/cli/bin/index.cjs:2591:3)
    at async s.<anonymous> (./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":"/tmp/test-app/node_modules/@storybook/addon-svelte-csf/dist/preset.js"} on level 1
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import './node_modules/@storybook/addon-svelte-csf/dist/compiler/post-transform/story' is not supported resolving ES modules imported from ./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:650:12)
    at #cachedDefaultResolve (node:internal/modules/esm/loader:599:25)
    at ModuleLoader.getModuleJobForRequire (node:internal/modules/esm/loader:349:53)
    at new ModuleJobSync (node:internal/modules/esm/module_job:338:34)
    at ModuleLoader.getModuleJobForRequire (node:internal/modules/esm/loader:409:11)
    at new ModuleJobSync (node:internal/modules/esm/module_job:338:34)
    at ModuleLoader.getModuleJobForRequire (node:internal/modules/esm/loader:409:11)
(node:305056) ExperimentalWarning: CommonJS module /tmp/test-app/node_modules/@storybook/core/dist/common/index.cjs is loading ES Module /tmp/test-app/node_modules/@storybook/addon-svelte-csf/dist/preset.js using require().
Support for loading ES Module in require() is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
✔ Would you like to help improve Storybook by sending anonymous crash reports? … yes
manuel3108 commented 4 days ago

Yeah, sadly the 8.4.x storybook versions are currently broken, i think we already pinned this in the repo, but did not release up until now.

https://github.com/sveltejs/cli/blob/0d3ecb7b25a085c342fafff2ccabb8ae69378123/packages/adders/storybook/index.ts#L12

We just released 0.6.2, which pins storybook to 8.3.6 which is the latest version that seems to be working.

hansihe commented 4 days ago

Interestingly creating a new project with the latest 0.6.2 version does not seem to work still. If it works to you, then something about my env might be messed up, but I am unsure what that could be.