[Bug]: storybook init fails in turbo + sveltekit + pnpm monorepo

[cge-taal]

Describe the bug

In trying to solve Storybook support for Svelte 4 and Storybook 8, I've run across some issues.

When attempting a new turbo + sveltekit + pnpm monorepo, storybook init fails.

Please see the linked repository for more details.

Reproduction link

https://github.com/cge-taal/test-sveltekit-storybook

Reproduction steps

No response

System

Storybook Environment Info:

  System:
    OS: macOS 13.5.1
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.14.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.7.0 - /usr/local/bin/npm
    pnpm: 9.4.0 - /opt/homebrew/bin/pnpm <----- active
  Browsers:
    Safari: 16.6

Additional context

No response

[greptile-apps]

** Disclaimer** This information might be inaccurate, due to it being generated automatically
To address the issue with storybook init in a turbo + sveltekit + pnpm monorepo, follow these steps:

1. Install Storybook for SvelteKit:

   pnpm add --save-dev @storybook/sveltekit

2. Initialize Storybook:

   pnpm dlx storybook@latest init --type sveltekit

3. Check preset.js in /code/frameworks/sveltekit:
   Ensure the configuration aligns with your monorepo setup. Adjust paths if necessary.

4. Update tsconfig.json:
   Verify TypeScript settings in /code/frameworks/sveltekit/tsconfig.json to ensure compatibility with your project structure.

5. Review vitest.config.ts:
   Confirm the Vitest configuration in /code/frameworks/sveltekit/vitest.config.ts is correctly set up for your monorepo.

These steps should help resolve the initialization issue in your specific setup.

References

/code/frameworks/sveltekit
/docs/_snippets/sveltekit-install.md
/docs/_snippets/svelte-vite-install.md
/docs/_snippets/svelte-webpack5-install.md
/docs/_snippets/storybook-init-v7.md
/docs/_snippets/init-command.md
/docs/_snippets/init-command-manual-framework.md

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Ask Greptile · Edit Issue Bot Settings

[shilman]

@cge-taal Here are some suggestions:

1. Try pnpm dlx storybook@8.1 init --type sveltekit. We made a bunch of aggressive changes in 8.2 and it might still be buggy. I tried this and hit a different error around .svelte files.
2. Try adding a vite config to your ui package -- there currently is none but I think there has to be in order to handle .svelte files.

[cge-taal]

Thanks a lot @shilman - admittedly I've deliberately tried to stick only to the basics, as a test for maturity of SvelteKit and its surrounding ecosystem. It is already good to have your feedback that version 8.2 of Storybook is known to be a little rough on the edges still - in as far as SvelteKit support is concerned.

I'll update the ui package to be closer to another version I have somewhere - which resembles a so-called "SvelteKit library skeleton project" (or similar).

Hopefully the end result is clarity on which versions of libraries to stick with to have full integration capabilities.

With this knowledge perhaps even turborepo could be updated to have more realistic basics included for its SvelteKit starter.

[cge-taal]

By the way, my real use-case is to have Storybook working fully in the monorepo environment mentioned.

As far as I'm aware, Storybook still needs to use the addon-svelte-csf addon to enable stories for Svelte / SvelteKit ?

Will that still be the case for Storybook >= 8 ? Given support for <slot/>s is required ?

Actual working examples would be wonderful to see. I've seen mostly open tickets and it is not really clear which versions of which libraries and APIs to go with.

Related ticket: storybookjs/addon-svelte-csf#188

[cge-taal]

Apologies @shilman , I was busy with other things. So I tried your advice. Here are my steps

npx create-turbo@latest -e with-svelte storyrepo
cd storyrepo
mkdir apps/storybook
cd apps/storybook

At this point I did exactly as you suggested: pnpm dlx storybook@8.1 init --type sveltekit

SvelteKit is nowhere to be found in the project templates - please see the attached.

This leads me to believe there is no SvelteKit support in the tooling and I cannot find a latest example that works. My next steps will include "lots of trial and error doing different things" as someone on Svelte Discord suggested.

[shilman]

@cge-taal the typical use of npx storybook@latest init is running inside the directory of an existing project that contains components, not in an empty directory. when you run it in an empty directory, it first bootstraps a project of your choosing and then installs storybook into it.

as it says above on the empty folder init that you screenshotted:

[cge-taal]

Thanks again @shilman for your continued help. Yes I did create a repo to illustrate what you suggest: https://github.com/cge-taal/storyrepo

Repeating the steps here

npx create-turbo@latest -e with-svelte storyrepo # choose pnpm
cd storyrepo/apps
npm create svelte@latest storybook # Choose Library project and TS. Don't add Svelte5
cd storybook

And then pnpm dlx storybook@latest init --type sveltekit, as version 8.1 also gave me issues. I'm happy to help debug this and make a clear path for this environment setup. Please don't hesitate to suggest more things I could try.

Thanks!

[cge-taal]

Hi @shilman , it has been a while. Just wanted to give an update on this.

The example repo I made lists steps that work in its readme : https://github.com/cge-taal/storyrepo

As you'll see there, the main.ts still needs fixing after following proposed steps via the tools, so I recommend updating the default of main.ts for svelte(kit).

Furthermore, I have a strange error, that I'm sadly not able to reproduce in a small example, but I've narrowed down when it happens.

In my ui package, I tend to name components via folders and keep the svelte files as index.svelte, so for example components/button/index.svelte.

When I write stories in my apps/storybook/src/stories folder, I tend to do something similar, having a apps/storybook/src/stories/components/button/index.stories.svelte file.

However, this sometimes gives me the following error when running storybook and trying to view the applicable component:

TypeError: Cannot destructure property 'story' of 'o' as it is undefined.
    at normalizeStory (http://localhost:6008/sb-preview/runtime.js:7154:62)
    at http://localhost:6008/sb-preview/runtime.js:7224:15
    at Array.forEach (<anonymous>)
    at processCSFFile (http://localhost:6008/sb-preview/runtime.js:7222:25)
    at li.memoizerific [as processCSFFileWithCache] (http://localhost:6008/sb-preview/runtime.js:127:95)
    at yi.prepare (http://localhost:6008/sb-preview/runtime.js:8790:66)
    at async ts.renderSelection (http://localhost:6008/sb-preview/runtime.js:9062:7)

When I rename the stories file to button.stories.svelte instead of index.stories.svelte, the problem goes away.

Perhaps you might know why that happens. For now at least it seems I have a workaround via different file naming.