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 does not show any stories!

See original GitHub issue

I tried adding Storybook into a newer project. I have used Storybook before, but the last version I was running was 5.3.18. Today I did a fresh install. But after everything was set up and running, the Storybook app does not show many any of the created stories:

image

The main.js looks like this:

module.exports = {
  stories: [
    '../src/**/*.stories.js'
  ],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-links'
  ],
}

I have now 1 very simple story in my project that should show up as configured:

The path to it is ./src/common/components/Badge/Badge.stories.js from the project root. Storybook runs without an issue:

image

And the story is also very simple:

import { Badge } from './Badge';

export default {
  title: 'Badge',
  component: Badge,
};

There are no errors reported or anything that could lead me to any potential cause.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:22 (10 by maintainers)

github_iconTop GitHub Comments

3reactions
j3rem1ecommented, Feb 4, 2021

You doesn’t export any stories. You should maybe add :

export const Default = (args) => <Badge {...args}/>

The syntax depends on your framework, I assumed it’s React.

1reaction
devbucketcommented, Mar 16, 2021

I can confirm that this solution works now. At least we can continue with our project. Thank you very much.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to troubleshoot storybook not loading stories?
Resave save the story file. It makes the component reappear in side panel, and then you can see the errors ...
Read more >
Couldn't find any stories in your Storybook [#3274004] - Drupal
As you discovered, you need to update the "stories" key to find your Storybook stories. I see this is missing from the docs....
Read more >
DocsPage - Storybook - JS.ORG
When you install Storybook Docs, DocsPage is the zero-config default documentation that all stories get out of the box. It aggregates your stories, ......
Read more >
How to Import Your Components to Storybook and Use Them ...
All added functionality uses the story files, the original code doesn't change. Additionally, no Storybook-specific libraries are required when ...
Read more >
storybook/addon-docs - npm
For more information on how it works, see the DocsPage reference. MDX. MDX is a syntax for writing long-form documentation and stories side-by- ......
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