question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Storybook comes up empty with 6.4.0-alpha.20 and later (it's ok up to 6.4.0-alpha.19)

See original GitHub issue

Describe the bug When I update the version of @storybook/react and related @storybook packages to 6.4.0-alpha.20 or above, my storybook comes up empty. With previous versions of storybook, up to and including 6.4.0-alpha.19, it comes up fine with stories in. I wonder if there is a regression in #15399. NB our storybook is produced with a list of explicit files, not a glob.

To Reproduce Here is a cut-down version of our repo: https://github.com/dcwarwick/ibm-cloud-cognitive/tree/storybook-640alpha20

To reproduce:

  • clone that branch
  • run yarn and yarn:storybook
  • Storybook comes up empty (“Oh no! Your Storybook is empty.”)

If the @storybook versions in /packages/core/package.json are pulled back to 6.4.0-alpha.19 or below, yarn:storybook will produce a storybook with stories in as expected.

Here is a running instance of the above branch: https://deploy-preview-1108--ibm-cloud-cognitive.netlify.app/

Here is a running instance of the full repo using @storybook version 6.3.6: https://ibm-cloud-cognitive.netlify.app/?path=/story/cloud-cognitive-released-aboutmodal--about-modal

System Please paste the results of npx sb@next info here.

$ npx sb@next info

Environment Info:

  System:
    OS: macOS 11.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v14.16.0/bin/npm
  Browsers:
    Chrome: 92.0.4515.131
    Firefox: 88.0.1
    Safari: 14.1.1

Additional context The storybook configuration files are all in /packages/core.

I’ve produced a cut-down version of our real-life case rather than attempting to make a minimal reproduction, as I suspect there is something significant in the way we have configured storybook and it might be difficult to recreate that from scratch.

Here is the module.exports from our main.js:

{
  core: { builder: 'webpack5' },
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-docs',
    '@storybook/addon-controls',
    '@storybook/addon-knobs',
    '@storybook/addon-storysource',
    '@storybook/addon-viewport',
    '@carbon/storybook-addon-theme/register'
  ],
  reactOptions: { strictMode: true },
  stories: [
    '/Users/dave/git/ibm-cloud-cognitive/packages/cloud-cognitive/src/components/AboutModal/AboutModal.stories.js',
    '/Users/dave/git/ibm-cloud-cognitive/packages/core/docs/getting-started.stories.mdx'
  ],
  webpackFinal: [AsyncFunction: webpackFinal]
}

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
shilmancommented, Aug 7, 2021

Huzzah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.0-alpha.25 containing PR #15775 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease
1reaction
lkuechlercommented, Aug 6, 2021

@shilman I have created a PR that should solve this issue. #15775

@dcwarwick thank you for the detailed analysis and the suggestion on how to solve this. Could you check if the test really matches with the issue that you where having?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Storybook comes up empty with 6.4.0-alpha.20 and ...
0-alpha.20 or above, my storybook comes up empty. With previous versions of storybook, up to and including 6.4.0-alpha.19, it comes up fine with...
Read more >
FAST_REFRESH=true causes compilation error (Webpack ...
In fact, it comes up empty on anything from 6.4.0-alpha.20 onwards -- it's fine up to and including 6.4.0-alpha.19 .
Read more >
@storybook/addon-storyshots | Yarn - Package Manager
▶️ Interactive stories to simulate user behavior and tools to debug it; ⚡️ On-demand architecture for smaller builds and faster load times; ⛸...
Read more >
MUI v5 + Storybook: Theme and font family do not work in ...
So apparently there is an incompability with Storybook <6.3 since it relies on @emotion/styled v10, while MUI v5 must use v11.
Read more >
Component Encyclopedia
Component Encyclopedia. Reference thousands of components from leading UI engineering teams. Search. VueEmotionWeb componentsSassReact ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found