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

bug in CSF export default #9457

Closed
Pain-and-Love opened this issue Jan 15, 2020 · 25 comments
Closed

bug in CSF export default #9457

Pain-and-Love opened this issue Jan 15, 2020 · 25 comments
Labels
bug csf yarn / npm Yarn / npm acting weird
Milestone

Comments

@Pain-and-Love
Copy link

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
image

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
Copy link
Member

shilman commented Jan 15, 2020

@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
Copy link
Author

@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...
image

image

@Pain-and-Love
Copy link
Author

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

@shilman
Copy link
Member

shilman commented Jan 15, 2020

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

@Pain-and-Love
Copy link
Author

Pain-and-Love commented Jan 15, 2020

@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
Copy link
Member

shilman commented Jan 15, 2020

Can you share a reproduction repo?

@shilman shilman added csf and removed ui labels Jan 15, 2020
@Pain-and-Love
Copy link
Author

Pain-and-Love commented Jan 16, 2020

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
Copy link
Author

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
Copy link
Author

SAD T.T

@shilman
Copy link
Member

shilman commented Jan 16, 2020

@atanasster mind taking a look?

@atanasster
Copy link
Member

@shilman got it

@Pain-and-Love
Copy link
Author

@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 shilman added this to the 5.3.x milestone Jan 17, 2020
@shilman
Copy link
Member

shilman commented Jan 17, 2020

@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==

@shilman shilman closed this as completed Jan 17, 2020
@shilman shilman added question / support yarn / npm Yarn / npm acting weird and removed bug labels Jan 17, 2020
@atanasster
Copy link
Member

@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.

@shilman shilman added the bug label Jan 17, 2020
@Pain-and-Love
Copy link
Author

@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;
image

@Pain-and-Love
Copy link
Author

@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
Copy link
Member

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
Copy link
Author

Pain-and-Love commented Jan 17, 2020

@storybook/source-loader

image

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

@atanasster
Copy link
Member

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
Copy link
Author

Pain-and-Love commented Jan 17, 2020

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

image

@atanasster
Copy link
Member

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
Copy link
Author

Pain-and-Love commented Jan 17, 2020

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
Copy link
Member

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
Copy link
Member

shilman commented Jan 17, 2020

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.

@shilman shilman closed this as completed Jan 17, 2020
@Pain-and-Love
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug csf yarn / npm Yarn / npm acting weird
Projects
None yet
Development

No branches or pull requests

3 participants