[Bug]: Svelte 5 docgen crashes with MyComponent is not defined
if a variable has the same name as the filename
#30212
Labels
MyComponent is not defined
if a variable has the same name as the filename
#30212
Describe the bug
In Svelte 5+Vite (or SvelteKit), if you have a variable anywhere inside your Svelte component that is called the same as the filename, our internal Svelte docgen Vite plugin will crash with
MyComponent is not defined
.Given the following Svelte component called
Greeting.svelte
:It will crash with said error.
The reason for this, is that the above is compiled to something like this by Svelte:
The default function has a
_1
appended to the name, to not cause a collision with the internal variable namedGreeting
.See https://svelte.dev/playground/23d895f41dc9451997d8ee7ead4e7be9?version=5.16.6
However our Svelte docgen logic adds a
__docgen
property to the default export, using different naming heuristics from Svelte 4, doing:We fixed a similar issue in
@storybook/addon-svelte-csf
v5 by instead of trying to replicate the variable naming logic, we used AST parsing to get the name of the default export and use that as the reference. We could potentially do the same here. We could also try to update the naming logic to mimic Svelte 5 behavior too, but AFAIK that is easier said than done, because that logic is now spread out through multiple flows in Svelte internally.Additional context
This is the naming logic that only works with Svelte 4: https://github.com/storybookjs/storybook/blob/next/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts/#L41-L71
This is where we add the
__docgen
property: https://github.com/storybookjs/storybook/blob/next/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts/#L228-L230The text was updated successfully, but these errors were encountered: