search

sveltejs / cli

The Svelte CLI
MIT License
258 stars 11 forks source link

`sv create` with storybook is broken #320

Closed fbehrens closed 1 day ago

fbehrens commented 1 day ago

Hi,

... at least to me ;

just want to report as i think, that I am not missing something .

Frank

my environment

os: Darwin Kernel Version 24.1.0: Thu Oct 10 21:06:23 PDT 2024; root:xnu-11215.41.3~3/RELEASE_ARM64_T8132'
node: v23.2.0
pnpm: 9.14.1
% npx sv create myapp

(node:58755) ExperimentalWarning: CommonJS module /Users/fb/.nvm/versions/node/v23.2.0/lib/node_modules/npm/node_modules/debug/src/node.js is loading ES Module /Users/fb/.nvm/versions/node/v23.2.0/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.4)
◇  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 / spacebar)
│  storybook
◇  Which package manager do you want to install dependencies with?
│  pnpm
◇  Running external command (pnpm dlx storybook@latest init --skip-install --no-dev)
(node:58806) ExperimentalWarning: CommonJS module /Users/fb/.nvm/versions/node/v23.2.0/lib/node_modules/npm/node_modules/debug/src/node.js is loading ES Module /Users/fb/.nvm/versions/node/v23.2.0/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.4 to your project..   │
│                                                      │
╰──────────────────────────────────────────────────────╯
 • Detecting project type. ✓
 • Adding Storybook support to your "SvelteKit" app
  ✔ Getting the correct version of 9 packages
  ✔ Installing Storybook dependencies
. ✓

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 pnpm 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 installed dependencies
◇  Project next steps │  1: cd myapp                                                             │
│  2: git init && git add -A && git commit -m "Initial commit" (optional)  │
│  3: pnpm dev --open                                                      │
│  To close the dev server, hit Ctrl-C                                     │
│  Stuck? Visit us at https://svelte.dev/chat                              │
└  You're all set!

% cd myapp 
myapp % pnpm i             
Lockfile is up to date, resolution step is skipped
Already up to date
Done in 368ms

myapp % pnpm run storybook 

> myapp@0.0.1 storybook /Users/fb/Documents/Github/myapp
> storybook dev -p 6006
@storybook/core v8.4.4

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/@storybook+addon-svelte-csf@5.0.0-next.11_@storybook+svelte@8.4.4_storybook@8.4.4_svelte@5.2._vu6jifpvabysmtmzzp4bd6g5sy/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/@storybook+addon-svelte-csf@5.0.0-next.11_@storybook+svelte@8.4.4_storybook@8.4.4_svelte@5.2._vu6jifpvabysmtmzzp4bd6g5sy/node_modules/@storybook/addon-svelte-csf/dist/compiler/post-transform/story' is not supported resolving ES modules imported from ./node_modules/.pnpm/@storybook+addon-svelte-csf@5.0.0-next.11_@storybook+svelte@8.4.4_storybook@8.4.4_svelte@5.2._vu6jifpvabysmtmzzp4bd6g5sy/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:860:10)
    at defaultResolve (node:internal/modules/esm/resolve:984: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/@storybook+core@8.4.4/node_modules/@storybook/core/dist/common/index.cjs:16477:13)

More info: 

    at loadPreset (./node_modules/.pnpm/@storybook+core@8.4.4/node_modules/@storybook/core/dist/common/index.cjs:16477:13)
    at async Promise.all (index 1)
    at async loadPresets (./node_modules/.pnpm/@storybook+core@8.4.4/node_modules/@storybook/core/dist/common/index.cjs:16487:55)
    at async getPresets (./node_modules/.pnpm/@storybook+core@8.4.4/node_modules/@storybook/core/dist/common/index.cjs:16520:11)
    at async buildDevStandalone (./node_modules/.pnpm/@storybook+core@8.4.4/node_modules/@storybook/core/dist/core-server/index.cjs:37145:11)
    at async withTelemetry (./node_modules/.pnpm/@storybook+core@8.4.4/node_modules/@storybook/core/dist/core-server/index.cjs:35757:12)
    at async dev (./node_modules/.pnpm/@storybook+core@8.4.4/node_modules/@storybook/core/dist/cli/bin/index.cjs:2591:3)
    at async s.<anonymous> (./node_modules/.pnpm/@storybook+core@8.4.4/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/fb/Documents/Github/myapp/node_modules/.pnpm/@storybook+addon-svelte-csf@5.0.0-next.11_@storybook+svelte@8.4.4_storybook@8.4.4_svelte@5.2._vu6jifpvabysmtmzzp4bd6g5sy/node_modules/@storybook/addon-svelte-csf/dist/preset.js"} on level 1
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import './node_modules/.pnpm/@storybook+addon-svelte-csf@5.0.0-next.11_@storybook+svelte@8.4.4_storybook@8.4.4_svelte@5.2._vu6jifpvabysmtmzzp4bd6g5sy/node_modules/@storybook/addon-svelte-csf/dist/compiler/post-transform/story' is not supported resolving ES modules imported from ./node_modules/.pnpm/@storybook+addon-svelte-csf@5.0.0-next.11_@storybook+svelte@8.4.4_storybook@8.4.4_svelte@5.2._vu6jifpvabysmtmzzp4bd6g5sy/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:860:10)
    at defaultResolve (node:internal/modules/esm/resolve:984: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)
(node:58966) ExperimentalWarning: CommonJS module /Users/fb/Documents/Github/myapp/node_modules/.pnpm/@storybook+core@8.4.4/node_modules/@storybook/core/dist/common/index.cjs is loading ES Module /Users/fb/Documents/Github/myapp/node_modules/.pnpm/@storybook+addon-svelte-csf@5.0.0-next.11_@storybook+svelte@8.4.4_storybook@8.4.4_svelte@5.2._vu6jifpvabysmtmzzp4bd6g5sy/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? › (Y/n)

// .storybook/mail.ts
/** @type { import('@storybook/sveltekit').StorybookConfig } */
const config = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|ts|svelte)"],
  addons: [
    "@storybook/addon-svelte-csf",
    "@storybook/addon-essentials",
    "@chromatic-com/storybook",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/sveltekit",
    options: {},
  },
};
export default config;
benmccann commented 1 day ago

It's because you're using Node 23. Please use a stable version of Node.js