[Bug] cannot use some names in imports

[oxymc]

Note

This issue as a possible workaround

Describe the bug

Can't use:
import { Menu } from './index'; in index.stories.svelte
(but it works, if 'Menu' will be changed by other word: 'DropdownMenu' for example)

Steps to reproduce the behavior

1. Create a new sveltekit app: npm create svelte@latest <name-of-app>
2. Now add storybook npx storybook init
3. Now add Svelte CSF
4. Reproduce the issue

Expected behavior

More details are in screenshots

Screenshots and/or logs

Environment

• OS: macOS Sonoma 14.1.2
• Node.js version: v18.17.1
• NPM version: 10.0.0
• Browser (if applicable): Chrome
• Browser version (if applicable): 121.0.6167.85
• Device (if applicable): MacBook Pro 2019

Additional context

Will be good to know which words are 'forbidden' too, but will be great to fix it :)

[j3rem1e]

Do you have a repo where I can look ?

Import should be analyzed with a warning/Reallocation of the story with the same name.

[basselalsayed]

For me the issue comes with import "conflicts"

// menu.svelte

import { Menu } from './menu-base.svelte';

=> docgen error, object is not extensible

if we rename to

import { Menu as Base } from './menu-base.svelte';

it works.

I wasn't sure if the error came from this library, storybook, vite or esm lol

[JReinhold]

@basselalsayed can you share a repository that demonstrates this problem?

[basselalsayed]

@JReinhold yeah here you go https://github.com/basselalsayed/svelte-storybook-csf-issue

in select.svelte, try renaming the import and it works fine

[ACERposS]

I am experiencing a similar issue with shadowing of the global Error class when mocking GraphQL test cases. The workaround is to use global.Error, as in-

<APIProvider mocks={{
  Query: {
    getRecords: () => { throw new global.Error("Request failure"); },
  },
}}>
  <ComponentUnderTest />
</APIProvider>

Perhaps a general pass to reduce name collisions over all the scoped variables in the template would be good, incl. underscore prefixing etc.