Storybook does not show any stories!
See original GitHub issueI 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:
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:
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:
- Created 3 years ago
- Comments:22 (10 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
You doesn’t export any stories. You should maybe add :
The syntax depends on your framework, I assumed it’s React.
I can confirm that this solution works now. At least we can continue with our project. Thank you very much.