I'm trying to load up the demo storybook stories (withText, withIcon), using this react guide, but I cannot get any of the example stories to run.
For the avoidance of doubt, here's the code file (Histogram.stories.js):
import React from 'react';
import { Button } from '@storybook/react/demo';
export default { title: 'Button' };
export const withText = () => <Button>Hello Button</Button>;
export const withEmoji = () => ( <Button> <span aria-label="so cool"> 😀 😎 👍 💯 </span> </Button>
);And my main.js
module.exports = { stories: ['../src/**/*.stories.jsx?'],
};When I run npm run storybook I get this page:
This is the output in the devconsole:
vendors~main.9bf87aec509ee033c0f8.bundle.js:135070 Download the React DevTools for a better development experience: .me/react-devtools
DevTools failed to parse SourceMap: chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.preload.js.map
DevTools failed to parse SourceMap: chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.postload.js.map
DevTools failed to parse SourceMap: Which doesn't show what went wrong.
Likewise I cant see whats wrong with the set up on the command line
> start-storybook
info @storybook/react v5.3.18
info
info => Loading presets
info => Loading presets
info => Adding stories defined in ".storybook\main.js".
info => Using default Webpack setup.
info => Using base config because react-scripts is not installed.
webpack built 618e1f89c3579e851a85 in 52146ms
╭────────────────────────────────────────────────────╮
│ │
│ Storybook 5.3.18 started │
│ 1.37 min for manager and 1.37 min for preview │
│ │
│ Local: │
│ On your network: │
│ │
╰────────────────────────────────────────────────────╯The only CLI option I can find, that seems relevant, is --debug-webpack but this does not produce further output in my case.
What can I do to further troubleshoot this problem?
126 Answers
The main.js in your ./storybook folder contains the line stories: ['../src/**/*.stories.jsx?'], since your story is named Histogram.stories.js it should be like below.
module.exports = { stories: ['../src/**/*.stories.js']
};I tried replicating this in my code by using your main.js and the exact same thing happened to me as well. Also adding the ? like this stories: ['../src/**/*.stories.js?'] gives the same error
Edit- you can check for both .js and .jsx by modifying the line like this stories: ['../src/**/*.stories.js(x)?']
Edit (24/7/2021) - As of today while installing storybook with npx sb init and choosing react as the template it automatically adds the below snippet in the main.js file
module.exports = { "stories": [ "../stories/**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)" ], "addons": [ "@storybook/addon-links", "@storybook/addon-essentials" ]
}which solves for this issue
2Removing the node_modules/.cache/storybook folder and restarting Storybook is what worked for me.
Resave save the story file. It makes the component reappear in side panel, and then you can see the errors.
start-storybook seems to fail silently. But you can troubleshoot errors by resaving files one by one.
I had this same problem of "stories not showing up in storybook UI" that brought me here. Turns out, I had pasted in some test code that set a regEx on "excludeStories" to filter out any story function with the word "Data" in it. Of course, my disappearing story was named "StoryWithData", so it was excluded.
This took me way too long to figure this out, so posting here in case helps someone else.
export default { component: Footer, title: "App/Footer", excludeStories: /.*Data$/, // -> this will filter out functions named like "*Data"
}you should use as
module.exports = { stories: ['../src/**/*.stories.(ts|js|mdx)']
};basically handle all types of storries.
1You should run storybook server and then after run the react native app then if you refresh the webpage for react native server the stories should load.
1
