Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot destructure story file wildcard self import due to enumerable __namedExportsOrder #17889

Closed
jeysal opened this issue Apr 5, 2022 · 1 comment

Comments

@jeysal
Copy link

jeysal commented Apr 5, 2022

Describe the bug
Alright so this is a "fun" one. Since v6.4 as far as I can tell (perhaps since #16626 ?), stories cannot wildcard import themselves and then destructure the import.

In Button.stories.jsx, doing

import * as storyExports from "./Button.stories";
const { default: _default, ...stories } = storyExports;

makes the story file disappear and prints the console error:

Unexpected error while loading ./stories/Button.stories.jsx: Cannot access '__namedExportsOrder' before initialization

To Reproduce
https://github.com/jeysal/sb-self-import-repro yarn storybook

Created using npx sb@next repro. Added 3 lines at the bottom of Button.stories.jsx and made remark in readme.

Additional context

Q: Why the hell would you do this?
A: I'm also wildcard importing * as components from the component file under test, and then comparing Object.keys(components).length to Object.keys(stories).length to print an error if they differ because someone e.g. added a component export but forgot to create a story for it.

Q: Is there a workaround for this use case?
A: Yes, avoiding destructuring and instead Object.keysing the whole export and then filtering out the default export.

Q: Do you really expect us to make changes for this absurd construct that almost no one will have in their stories?
A: Totally fine if this is a wontfix, but I thought it's worth raising, maybe adding exports to people's code is not the best solution for the story ordering? Even if, it seems that at least the Babel plugin that adds __namedExportsOrder should make it a non-enumerable property like __esModule, which I think would fix the destructuring.

System
Environment Info:

System:
OS: Linux 5.17 Arch Linux
CPU: (16) x64 AMD Ryzen 9 5900HS with Radeon Graphics
Binaries:
Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
Yarn: 3.2.0 - ~/.nvm/versions/node/v16.13.0/bin/yarn
npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
Browsers:
Firefox: 98.0.2
npmPackages:
@storybook/addon-actions: ^6.5.0-alpha.56 => 6.5.0-alpha.56
@storybook/addon-docs: ^6.5.0-alpha.56 => 6.5.0-alpha.56
@storybook/addon-essentials: ^6.5.0-alpha.56 => 6.5.0-alpha.56
@storybook/addon-interactions: ^6.5.0-alpha.56 => 6.5.0-alpha.56
@storybook/addon-links: ^6.5.0-alpha.56 => 6.5.0-alpha.56
@storybook/builder-webpack5: ^6.5.0-alpha.56 => 6.5.0-alpha.56
@storybook/manager-webpack5: ^6.5.0-alpha.56 => 6.5.0-alpha.56
@storybook/node-logger: ^6.5.0-alpha.56 => 6.5.0-alpha.56
@storybook/preset-create-react-app: ^4.1.0 => 4.1.0
@storybook/react: ^6.5.0-alpha.56 => 6.5.0-alpha.56
@storybook/testing-library: ^0.0.9 => 0.0.9

@jeysal jeysal changed the title Cannot wildcard import story file from the story file itself Cannot destructure story file wildcard import due to enumerable __namedExportsOrder Apr 5, 2022
@jeysal jeysal changed the title Cannot destructure story file wildcard import due to enumerable __namedExportsOrder Cannot destructure story file wildcard self import due to enumerable __namedExportsOrder Apr 5, 2022
@shilman shilman added core and removed needs triage labels Jun 8, 2023
@shilman
Copy link
Member

shilman commented Jun 8, 2023

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if:

@shilman shilman closed this as not planned Won't fix, can't repro, duplicate, stale Jun 8, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants