How to troubleshoot storybook not loading stories?

Question

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 role="img" 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: https://fb .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: http://localhost:60923/unfetch.mjs.map

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:            http://localhost:60923/       │
│    On your network:  http://192.168.0.15:60923/    │
│                                                    │
╰────────────────────────────────────────────────────╯

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?

Answer 1

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

Answer 2

Removing the node_modules/.cache/storybook folder and restarting Storybook is what worked for me.

Answer 3

Check the console of the chrome window running localhost. You should see errors there. I had a component not showing up but the project ran smoothly and took me a bit to figure out what error and where it was coming

Answer 4

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.

Answer 5

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"
}

Answer 6

In my case, I had to clear the browser's local storage. There was an older storybook application running on localhost:6006

Answer 7

There is another scenario when some stories do not load (it took me a while to figure this one out).

When your story path is a substring of another story path, both the stories won't load (silent fail).

For example:

Path 1: foo/bar

Path 2: foo/bar/baz

This is because Storybook seems to consider rendering stories only for leaf nodes of the tree. In the above case, the foo/bar is NOT a leaf node, which makes the Storybook confused, so it gives up on everything (the whole subtree).

I also suspected that my story doesn't render because of the depth being to deep, but it seems any depth of stories is allowed:

foo1/foo2/foo3/foo4/foo5/foo6... -> fully valid story path.

Answer 8

you should use as

 module.exports = {
  stories: ['../src/**/*.stories.(ts|js|mdx)']
};

basically handle all types of storries.

Answer 9

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