Storybook: bug in CSF export default

[Pain-and-Love]

Describe the bug
i cant see the Components in the Storybook SideBar

To Reproduce
Steps to reproduce the behavior:
just create a file named by X.stories.tsx; then import other Comps

Expected behavior
if i remove the line 6; then i can see nothing about these Comps in the Storybook SideBar

Screenshots

System:

Environment Info:

System:
OS: macOS Mojave 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i7-9700K CPU @ 3.60GHz
Binaries:
Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 6.13.4 - ~/.nvm/versions/node/v10.16.3/bin/npm
Browsers:
Chrome: 79.0.3945.117
Safari: 13.0.4

Additional context
in the version 5.2.8. it works fine without the line 6; but in the version 5.3.3, it goes wrong(can't see the Comps in SideBar);

[shilman]

@Pain-and-Love are you sure it works in 5.2.8? Can you double check? I would't expect it to work (it shouldn't work). The sidebar shows _stories_ and when there are no stories, there shouldn't be anything to show. The default.title simply shows where to show those stories.

I think this is a reasonable feature request, but it would be tricky in the current architecture. Let's see what other people say!

[Pain-and-Love]

@Pain-and-Love are you sure it works in 5.2.8? Can you double check? I would't expect it to work (it shouldn't work). The sidebar shows _stories_ and when there are no stories, there shouldn't be anything to show. The default.title simply shows where to show those stories.

I think this is a reasonable feature request, but it would be tricky in the current architecture. Let's see what other people say!

i try it with 5.2.8.
it works fine...

[Pain-and-Love]

i hope this way could work fine in 5.3.3。
so i can avoid to repeating the code export default { title: 'XXX'}

[shilman]

@Pain-and-Love you are exporting named constants above SOverview SBaseInfo SSingleLiveTable. That doesn't work in 5.3?

[Pain-and-Love]

@Pain-and-Love you are exporting named constants above SOverview SBaseInfo SSingleLiveTable. That doesn't work in 5.3?

yeah. some code. expect that the line 6。
in the version 5.2.8 。without line 6 , the storybook SideBar shows the Comps i want。
but in the version 5.3.4。if i comment the line 6, the storybook SideBar don't show the Comps i want, when i add the line 6。 it works。

[shilman]

Can you share a reproduction repo?

[Pain-and-Love]

Can you share a reproduction repo?

https://github.com/Pain-and-Love/storybookReproduction

you can change the version from 5.2.8 to 5.3.4. then u will find the SiderBar does not show the Button

[Pain-and-Love]

Can you share a reproduction repo?

hi~, i can reproduction this bug in the repo. and i am worried with it ... could u plz resolve it as soon as possible 🥺

[Pain-and-Love]

SAD T.T

[shilman]

@atanasster mind taking a look?

[atanasster]

@shilman got it

[Pain-and-Love]

@shilman got it

but i don't add the Docs Addons in my addons.
in my repo, i think the typescript cause the affect on the preview pane
T.T

[shilman]

@Pain-and-Love It's working on my machine. I had to regenerate yarn.lock because the repo version was pointing at some weird registry like this:

  resolved "http://bnpm.byted.org/@babel/code-frame/download/@babel/code-frame-7.5.5.tgz#bc0782f6d69f7b7d49531219699b988f669a8f9d

=>

  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.5.5.tgz#bc0782f6d69f7b7d49531219699b988f669a8f9d"
  integrity sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==

[atanasster]

@shilman got it

but i don't add the Docs Addons in my addons.

Its caused by "@storybook/source-loader" - so any add-on like ''@storybook/addon-docs', '@storybook/addon-notes', '@storybook/addon-storysource', that are using it in their presets will cause this issue.

[Pain-and-Love]

@Pain-and-Love It's working on my machine. I had to regenerate yarn.lock because the repo version was pointing at some weird registry like this:

  resolved "http://bnpm.byted.org/@babel/code-frame/download/@babel/code-frame-7.5.5.tgz#bc0782f6d69f7b7d49531219699b988f669a8f9d

=>

  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.5.5.tgz#bc0782f6d69f7b7d49531219699b988f669a8f9d"
  integrity sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==

i remove all the addons. and delete yarn.lock. in my repo
but it still works bad;

[Pain-and-Love]

@shilman got it

but i don't add the Docs Addons in my addons.

Its caused by "@storybook/source-loader" - so any add-on like ''@storybook/addon-docs', '@storybook/addon-notes', '@storybook/addon-storysource', that are using it in their presets will cause this issue.

yeah. i have tries remove all the addons from my main.js.
but it still works badly... like the img above

[atanasster]

yeah. i have tries remove all the addons from my main.js.
but it still works badly... like the img above

You have "@storybook/source-loader" in your config - can you try removing it?

[Pain-and-Love]

@storybook/source-loader

yeah! i works after remove this loader !!!
but i need to use typescript T.T

[atanasster]

Yes, this one - you can still use typescript.
But unfortunately the source-loader module does not play nicely with re-exported or separate named exports.
We will check in a fix soon that will display your stories in the sidebar but the source code of the stories will not be available

[Pain-and-Love]

Yes, this one - you can still use typescript.
But unfortunately the source-loader module does not play nicely with re-exported or separate named exports.
We will check in a fix soon that will display your stories in the sidebar but the source code of the stories will not be available

but it could show Stories in the SiderBar and support show .tsx source code in the addon.
it means i can choose there three way now:

1. remove the source-loader from webpack.config.js。 so that i can see the Stories but i can't preview the tsx source code
2. add the PLACEHOLDER Stories like the first screenShot at line 6. so that i can see Stories and preview the tsx source code
3. revert the version 5.3.X to 5.2.8

but in the version 5.2.8。 it works fine together... T.T
how could i make them workds fine togeter in the version 5.3.X

[atanasster]

I really doubt it works fine in 5.2.8.
However if you can confirm 100% it works in 5.2.8 we can investigate the version of babel ast parse - that would be the only thing that could have worked differently.
In any case, it would not have shown the source code - since the source code is not located in the story itself.

For your needs (to not duplicate story title and config, iI would suggest to share the default object:

my-title.jsfile:

export default {
  title: 'Core/Re-export source loader',
}

and then use it in your story files:

import name from './my-name';
export default name;
const Story3 = () => 'story1';

[Pain-and-Love]

I really doubt it works fine in 5.2.8.
However if you can confirm 100% it works in 5.2.8 we can investigate the version of babel ast parse - that would be the only thing that could have worked differently.
In any case, it would not have shown the source code - since the source code is not located in the story itself.

For your needs (to not duplicate story title and config, iI would suggest to share the default object:

my-title.jsfile:

export default {
  title: 'Core/Re-export source loader',
}

and then use it in your story files:

import name from './my-name';
export default name;
const Story3 = () => 'story1';

thx. i confirm it works fine in 5.2.8。 because i upgrade it from 5.2.8 to 5.3.1 with the same config。
then i can't found the Stories in the sidebar after restart the storybook then refresh the page。

and when i add the line 6. it works in 5.3.5. it is strange.

[atanasster]

Very very strange - and you were able to see the story source code?
In any case i think my workaround above (sharing the default export title) should work better.

[shilman]

ZOMG!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.6 containing PR #9505 that references this issue. Upgrade today to try it out!

Closing this issue. Please re-open if you think there's still more to do.

[Pain-and-Love]

ZOMG!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.6 containing PR #9505 that references this issue. Upgrade today to try it out!

Closing this issue. Please re-open if you think there's still more to do.

THX very much. i would take your way (sharing the default export title) to resolve this problem