如何解决故事书未加载故事的问题？

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

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

Answer 2

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 3

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 4

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 5

you should use as

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

basically handle all types of storries.

Answer 6

First of all look at any warnings/errors printed in start-storybook script. Script can quietly allow some deprecations or misconfigurations.

Then I would compare your ./storybook/main.js file with one from docs of your chosen version.

For after version upgrade problems I strongly suggest following Storybook migration guides. They usually provide change log and code mod tools.

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-63x-to-640

Answer 7

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 8

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.