storybookjs/addon-svelte-csf

[Bug]: `autodocs` using `svelte-csf` `v5` does not render individual story within docs

Closed this issue · 4 comments

bhvngt commented

Describe the bug

I have been using this addon on a toy project. Its been observed that when autodocs is used, docs page does not render individual stories.

Steps to reproduce the behavior

Here's the reproduction of the issue.

For some unknown reason, stackblitz does not save .storybook folder. Hence, storybook init will have to be run to render storybook

Expected behavior

docs page for stories/Button component that uses this addon should render individual stories such as Primary, Secondary etc.

Screenshots and/or logs

image

Environment

  • OS: OSX
  • Node.js version: 22.3
  • NPM version: pnpm
xeho91 commented

Thanks again for testing and reporting the issue.

Based on your reproduction, I've forked with the .storybook/ directory being present.
https://stackblitz.com/edit/sveltejs-kit-template-default-132muy
I've added it manually. I was able to reproduce the issue, but please do let me know if the setup matches what you have.

@JReinhold It looks like we have regression here. Not sure yet if the issue is on svelte side or storybook. I'm quickly leaving a note for my further inspection later (I have to leave now). This is what I see in the web browser dev tools console:

chunk-URGNVH7N.js?v=738dfb0b:1094 Uncaught TypeError: Cannot read properties of undefined (reading 'rawCode')
    at skipSourceRender (@storybook_addon-svelte-csf_internal_create-runtime-stories.js?v=738dfb0b:640:77)
    at emitCode (@storybook_addon-svelte-csf_internal_create-runtime-stories.js?v=738dfb0b:621:7)
    at $effect (@storybook_addon-svelte-csf_internal_create-runtime-stories.js?v=738dfb0b:712:5)
    at update_reaction (chunk-URGNVH7N.js?v=738dfb0b:1111:23)
    at update_effect (chunk-URGNVH7N.js?v=738dfb0b:1229:21)
    at flush_queued_effects (chunk-URGNVH7N.js?v=738dfb0b:1283:7)
    at flush_queued_root_effects (chunk-URGNVH7N.js?v=738dfb0b:1270:9)
    at process_deferred (sveltejskittemplatedefaultbxes-hfev-s5fx0lx2--6006--60a75bde.local-credentialless.webcontainer.io/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-URGNVH7N.js?v=738dfb0b:1301:3)TypeError: Cannot read properties of undefined (reading 'rawCode')
    at skipSourceRender (@storybook_addon-svelte-csf_internal_create-runtime-stories.js?v=738dfb0b:640:77)
    at emitCode (@storybook_addon-svelte-csf_internal_create-runtime-stories.js?v=738dfb0b:621:7)
    at $effect (@storybook_addon-svelte-csf_internal_create-runtime-stories.js?v=738dfb0b:712:5)
    at update_reaction (chunk-URGNVH7N.js?v=738dfb0b:1111:23)
    at update_effect (chunk-URGNVH7N.js?v=738dfb0b:1229:21)
    at flush_queued_effects (chunk-URGNVH7N.js?v=738dfb0b:1283:7)
    at flush_queued_root_effects (chunk-URGNVH7N.js?v=738dfb0b:1270:9)
    at process_deferred (chunk-URGNVH7N.js?v=738dfb0b:1301:3)

For some reason __svelteCsf became undefined.

Also, a screenshot with expanded show code:
image

  • 👍1
bhvngt commented

please do let me know if the setup matches what you have.

Looks good to me. It matches with mine.

xeho91 commented

Ok, I found that there has been a breaking change in svelte@5.0.0-next.190 which I've missed.

PR: sveltejs/svelte#12479

Now the parser returns a single ExpressionTag instead of an array of (ExpressionTag | Text)[] on Attribute node. I'll provide a fix soon.

  • 🎉1
shilman commented

🚀 Issue was released in v5.0.0-next.2 🚀