Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.
Sign upStorybook 5.2 with CSF: __esModules story for every component #7710
Comments
This comment has been minimized.
This comment has been minimized.
Something that might help diagnose the issue further - do you have any custom babel/webpack config running? It sounds like you might have a custom babel config getting picked up which might be configured incorrectly for storybook? |
This comment has been minimized.
This comment has been minimized.
@jnielson94 I do have a custom Babel config: const BABEL_ENV = process.env.BABEL_ENV;
module.exports = () => ({
plugins: [
"babel-plugin-styled-components",
"polished",
"flow-react-proptypes",
// Stage 3
"@babel/plugin-syntax-dynamic-import",
["@babel/plugin-proposal-class-properties", { loose: true }]
],
presets: [
[
"@babel/preset-env",
{
loose: true,
modules: BABEL_ENV === "es" ? false : "commonjs",
targets: {
browsers: [
"last 2 Firefox versions",
"last 2 Chrome versions",
"Safari >= 8",
"last 2 Edge versions",
"ie > 10"
]
}
}
],
"@babel/react",
"@babel/flow"
]
}); |
This comment has been minimized.
This comment has been minimized.
To verify another thing, it looks like you're still using the |
This comment has been minimized.
This comment has been minimized.
@jnielson94 Nope, I switched to CSF using the provided code-mod. |
This comment has been minimized.
This comment has been minimized.
Ah, just noticed you mentioned that in the initial description. Are you running storybook with a Object.defineProperty(exports, "__esModule", {
value: true
}); To each file, which would explain why the story exists (since in CSF the export would get picked up as a story) :) Does it go away if you switch your |
This comment has been minimized.
This comment has been minimized.
@jnielson94 That fixed it! Worked like a charm. This could be good to document somewhere maybe? At least in the migration guide. I definitely assumed it was a bug when I first upgraded. |
This comment has been minimized.
This comment has been minimized.
I don't know the documentation well enough to know where it would make sense to note it - @shilman might have a better idea? |
This comment has been minimized.
This comment has been minimized.
@jnielson94 While I've got you here, I had another question about CSF... it seems as if this doesn't work:
I used to be able to nest stories into categories using this syntax, but it doesn't seem to work now. Is this a bug or expected? |
This comment has been minimized.
This comment has been minimized.
I'm not sure if that's expected or a bug, I know that I ran into that when I tried CSF on our codebase. Using nesting like that definitely works in the default export name (storiesOf equivalent), but I don't know if that was a decision that was made to not allow stories to nest themselves... |
This comment has been minimized.
This comment has been minimized.
@jnielson94 Good to know |
This comment has been minimized.
This comment has been minimized.
Yep, that's where my experimentation landed me as well. We decided that it'd probably be useful to break them up anyway to have smaller files to deal with, so we went ahead and did that (on 5.1 actually). I'd be curious to know the official stance/reason on stories nesting themselves though :) |
This comment has been minimized.
This comment has been minimized.
@jnielson94 Cool. I will open a separate issue to discuss that. Thanks for your help! Gonna go ahead and close this out. |
This comment has been minimized.
This comment has been minimized.
I'd be tempted to leave this one open to make sure the docs question gets addressed? Otherwise, glad to help! |
This comment has been minimized.
This comment has been minimized.
@chasemccoy @jnielson94 Looks like you guys sorted this out while I was sleeping. Let's add this to the docs if it comes up again. CSF picks up all named exports. Perhaps it would be useful to ignore exports whose names start with underscore? That would be a breaking change, but I'd consider it in 6.0. What do you guys think. Related feature is you can add Re: Story nesting, it works exactly as in storiesOf. So: export default { title: 'Foo|Bar/baz' }
export const apple = () => ...
zoo.story = { name: 'apple/banana' } Gets translated to: storiesOf('Foo|Bar/baz').add('apple/banana', () => ...) I don't expect this to change in future versions of CSF. |
This comment has been minimized.
This comment has been minimized.
@shilman In that example above, |
This comment has been minimized.
This comment has been minimized.
@chasemccoy I see, that's interesting. Won't change in 5.2, but we could consider something like that for a future release. No promises! cc @tmeasday |
This comment has been minimized.
This comment has been minimized.
@shilman Thanks so much! |
This comment has been minimized.
This comment has been minimized.
I didn't even know we supported that in the I think it (a) probably breaks the assumptions made in CSF and (b) is rarely used enough that we shouldn't support it. But correct me if I am wrong on (a) or (b). |
This comment has been minimized.
This comment has been minimized.
@tmeasday We don't support that in the |
This comment has been minimized.
This comment has been minimized.
Closing this for now, reply if there's more to resolve! |
This comment has been minimized.
This comment has been minimized.
Sorry, I think I explained this poorly. Here's the code we had before: storiesOf("Checkbox", module)
.add("Checked", () => <Checkbox checked={boolean("checked", true)} />)
.add("Unchecked", () => <Checkbox checked={boolean("checked", false)} />);
storiesOf("Checkbox/Disabled", module)
.add("Checked", () => (
<Checkbox
checked={boolean("checked", true)}
disabled={boolean("disabled", true)}
/>
))
.add("Unchecked", () => (
<Checkbox
checked={boolean("checked", false)}
disabled={boolean("disabled", true)}
/>
)); and it gave us this: As far as I can tell, with CSF there is no way to replicate this without creating multiple files (so that you can have more default exports). |
This comment has been minimized.
This comment has been minimized.
What I suppose I expected when switching to CSF if that the default export title would be |
This comment has been minimized.
This comment has been minimized.
So... I guess what I am saying is that the nesting separators seem to make more sense to me at the story level with CSF, instead of at the module level. If a module == a component in the mental model (at least this is our mental model), then it seems reasonable that you would have stories within that component that would have different nesting. But at the moment it seems nesting is only possible at the module level. |
This comment has been minimized.
This comment has been minimized.
@chasemccoy I understood your request. The current structure is by design. Our intent is that each component will have its own file and will be placed in the user-specified position in the hierarchy. It's flexible, you can achieve what you're looking for by creating more files. But for now we're pretty sticking to the That said, we're also receptive to feedback from users (like yourself) and partners (integrating with other tools), so the format will surely evolve. My point is that you shouldn't hold your breath on being able to nest in the way you requested. It complicates the format and I'm not sure whether we'll add it. And even if we did, it wouldn't make it in until 6.0, which will be awhile. |
This comment has been minimized.
This comment has been minimized.
@shilman Good to know! Thanks for walking me through it. Like I said, definitely not a deal breaker for us |
Describe the bug
I installed the beta of Storybook 5.2 and ran the codmod to update our stories. Everything seemed to work just fine, except all of my components now have a story called
__esModule
. Clicking on this story displays an error message:Attempted to set a non-object key in a WeakMap
(screenshots below)Screenshots

Storybook config file:
System: