Storybook: Not loading - "Loading source..." message

[favri]

Describe the bug
I only see the "loading source..." text in the Storybook tab

.storybooks/webpack.config.js

To Reproduce
`module.exports = function({ config }) {
config.module.rules.push({
test: /.stories.jsx?$/,
loaders: [require.resolve('@storybook/addon-storysource/loader')],
enforce: 'pre',
});

return defaultConfig;
};`

addons.js
`import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-knobs/register';
import 'storybook-addon-smart-knobs';
import '@storybook/addon-storysource/register';

Folder structure

src
/components
/stories
index.js

`

Expected behavior
Expect to see the component code

Screenshots

System:

• OS: [Linux Mint]
• Browser: chrome]
• Framework: [React]

Additional context

[papa-rugi]

Am dealing with this same issue.

[Armanio]

Try adding story in chain.
Like this:

const stories = storiesOf('MyCoolButton', module)
  .add('to Storybook', () => <Welcome showApp={linkTo('Button')} />)
  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
  .add('with some emoji', () => (
    <Button onClick={action('clicked')}>
      <span role="img" aria-label="so cool">
        😀 😎 👍 💯
      </span>
    </Button>
  ));
stories.addDecorator(withInfo)

[shilman]

@favri What happens when you fix the bug in your webpack.config.js to return config instead of defaultConfig?

[favri]

Hi @shilman i've changed that and still the same.

this is mi current package.json (updated to "@storybook/react": "^5.1.0-alpha.7",)

  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@storybook/addon-actions": "^5.0.3",
    "@storybook/addon-info": "^5.0.5",
    "@storybook/addon-knobs": "^5.0.5",
    "@storybook/addon-links": "^5.0.3",
    "@storybook/addon-storysource": "^5.0.5",
    "@storybook/addons": "^5.0.3",
    "@storybook/react": "^5.1.0-alpha.7",
    "@storybook/storybook-deployer": "^2.8.1",
    "@storybook/theming": "^5.0.5",
    "babel-loader": "^8.0.5",
    "prop-types": "^15.7.2",
    "storybook-addon-jsx": "^7.1.0",
    "storybook-addon-react-live-edit": "^2.0.2",
    "storybook-addon-smart-knobs": "^4.1.0"
  }

Simplified my index.js to return only one story

import React from 'react';
import { storiesOf } from '@storybook/react';
import { withSmartKnobs } from 'storybook-addon-smart-knobs'
import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';
import {withInfo} from "@storybook/addon-info";
import WhatsappPreview from '../components/whatsapp-preview.component';

const stories = storiesOf('Cliengo UI Components', module);

stories.addDecorator(withInfo);
stories.addDecorator(withSmartKnobs);
stories.addDecorator(withKnobs);

stories.add('Whatsapp Preview',() => (
  <WhatsappPreview color={text('color')} version={text('version')} msg={text('msg')} />
));

And webpack config looks like this (changed jsx to js as my main file is index.js

module.exports = function({ config }) {
  config.module.rules.push({
    test: /\.stories\.js?$/,
    loaders: [
      {
        loader: require.resolve('@storybook/addon-storysource/loader'),
        options: {
          prettierConfig: {
            printWidth: 100,
            singleQuote: false,
          },
        },
      },
    ],
    enforce: 'pre',
  });

  return config;
};

[shilman]

Did you try it without smart-knobs? https://github.com/storybooks/addon-smart-knobs/issues/44

[favri]

Yes, totally i've disable smartKnobs and removed imports from:

addons.js
config.js
index.js

[favri]

Just to add. I've tried to show one of the Storybook demo components (button) and same issue.

[favri]

I see this error in dev console:

onStory(...) has been replaced with on(STORY_CHANGED, ...)

[papa-rugi]

Just to be clear, the default location is src/stories/index.jsx right?

[VladimirHumeniuk]

Try to set test: /.story.jsx?$/, instead of test: /.stories.jsx?$/, in your webpack config.

[yaharga]

I've been having the same issue. I think the webpack.config.js isn't even being loaded. I know this because I attempted to change the file content to get a reaction through compilation, to no avail. It is in the .storybook folder, in the same directory as the storybook folder, along with src folder. Problem occurred after upgrading from 4.1.11 to 5.0.5.

// webpack.config.js
// Export a function. Accept the base config as the only param.
module.exports = async ({ config, mode }) => {
  // `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'
  // You can change the configuration based on that.
  // 'PRODUCTION' is used when building the static version of storybook.

  // Make whatever fine-grained changes you need
  config.module.rules.push({
    test: /\.stories\.jsx?$/,
    loaders: [require.resolve('@storybook/addon-storysource/loader')],
    enforce: 'pre',
  });
  return config;
}

I've tried the following:

• Change test: /\.stories\.jsx?$/ to test: /\.story\.jsx?$/, test: /\.stories\.js?$/, and test: /.jsx?$/.
• Removed async and added it.
• Changed the webpack.config.js to match any of the cofigs found in Custom Webpack Config.

I would add it directly to the main Webpack file, except that I'm using create-react-app, so it is not accessible to me.

Running OS X.

[favri]

Any news?

[j0lv3r4]

I was having the same issue and this configuration fixed it for me:

// .storybook/webpack.config.js
const path = require('path');
const storysource = require.resolve('@storybook/addon-storysource/loader')

module.exports = function({ config }) {
  config.module.rules.push({
    test: /\.jsx?$/,
    loaders: [storysource],
    include: path.resolve(__dirname, '../'), // this fixed it, I think.
    enforce: 'pre',
  });

  return config;
};

[Armanio]

Guys, storysource addon dont working if your stories not chaining. It's known bug.
Try add stories in chain like in my comment above.

[favri]

@Armanio I've chained and even showed only 1 file and still the same error.

However @j0lv3r4 's code, "fixit". Instead of "loading source" i see now. Still not the component code, but closer. Any idea?:

import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';
import { withCssResources } from '@storybook/addon-cssresources';
import { withPropsTable } from 'storybook-addon-react-docgen';
import { withInfo } from '@storybook/addon-info';
// import { action } from '@storybook/addon-actions';
// import { linkTo } from '@storybook/addon-links';
import WhatsappPreview from '../components/WhatsAppPreview/whatsappPreview';

const stories = storiesOf('Preview Components', module);
stories.addDecorator(withKnobs);
stories.addDecorator(withCssResources);
stories.addDecorator(withPropsTable);

stories.add('Whatsapp', () => <WhatsappPreview color={text('color')} version={text('version')} msg={text('msg')} />, {
  notes: 'Vista previa de la configuración de Whatsapp.',
  cssresources: [
    {
      id: 'small-button',
      code:
        '<style> button { color: #333333 !important; background-color: #075e54 !important; width: 0% !important;} span {display: none;}</style>',
      picked: false,
    },
  ],
});

stories.addDecorator(withInfo);

[Armanio]

@favri, storysource not show your component code. Storysource show you story file and allow to navigate between stories in file.
You screenshot look like a working. :thinking:

[Armanio]

Oh, of course, I see!
In my comment I chain stories after storiesOf call. And you separate stories and storiesOf call. Try to do like me. :smiley:

[j0lv3r4]

@favri Storybook is working as intended, tt shows your component. I think what you want now is the info addon to work, so why don't you try to move the line of code that adds it above next to the other ones, like so:

import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';
import { withCssResources } from '@storybook/addon-cssresources';
import { withPropsTable } from 'storybook-addon-react-docgen';
import { withInfo } from '@storybook/addon-info';
// import { action } from '@storybook/addon-actions';
// import { linkTo } from '@storybook/addon-links';
import WhatsappPreview from '../components/WhatsAppPreview/whatsappPreview';

const stories = storiesOf('Preview Components', module);
stories.addDecorator(withKnobs);
stories.addDecorator(withCssResources);
stories.addDecorator(withPropsTable);
stories.addDecorator(withInfo); // Move this here

stories.add('Whatsapp', () => <WhatsappPreview color={text('color')} version={text('version')} msg={text('msg')} />, {
  notes: 'Vista previa de la configuración de Whatsapp.',
  cssresources: [
    {
      id: 'small-button',
      code:
        '<style> button { color: #333333 !important; background-color: #075e54 !important; width: 0% !important;} span {display: none;}</style>',
      picked: false,
    },
  ],
});

[shilman]

@favri The code you shared isn't chained. Chained is:

storiesOf(...).add(...).add(...)

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[smeijer]

@stale please don't close! I'm experiencing the same issue. Haven't found a solution yet.

In the meanwhile; I'm using storybook-addon-jsx to fill the gap.

[cafesanu]

https://github.com/storybooks/storybook/issues/6262#issuecomment-477076005 and https://github.com/storybooks/storybook/issues/6262#issuecomment-481353727 were relevant. These answers solved my issue

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[devadeka]

This comment solved my issue... I moved my webpack.config.js to the .storybook folder.

[esase]

Try to set test: /.story.jsx?$/, instead of test: /.stories.jsx?$/, in your webpack config.

or 'stories.ts' if you use type script

[nadelbaeumchen]

I had the same problem and I was working on it for days. Turns out deleting the webpack.config.js solved my problem. I have no idea how or why it works but maybe this solves other peoples problem too.

[MrTim]

Faced the same problem. I made it work with the following setup:
.storybook/addons.js

import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-storysource/register';

.storybook/webpack.config.js

module.exports = function({ config }) {
    config.module.rules.push(
        {
            test: /\.stories\.js?$/,
            loaders: [require.resolve('@storybook/source-loader')],
            enforce: 'pre'
        }
    )

    return config
}

After that story source finally appeared in the storybook. Maybe this would help someone.

[bitfactory-lasse-vandenboschchristensen]

I was having the same issue and this configuration fixed it for me:

// .storybook/webpack.config.js
const path = require('path');
const storysource = require.resolve('@storybook/addon-storysource/loader')

module.exports = function({ config }) {
  config.module.rules.push({
    test: /\.jsx?$/,
    loaders: [storysource],
    include: path.resolve(__dirname, '../'), // this fixed it, I think.
    enforce: 'pre',
  });

  return config;
};

This solved my issues with vue 🤟

[aravij]

Is there any solution without diving in Webpack config? I am using new (v5.3+) storybook configuration and here is mine main.js file. I would like to configure preset there. And I also getting loading source... error.

const path = require("path")

module.exports =
{
    stories: ["../../src/**/stories.ts"],
    addons:
    [
        {
            name: "@storybook/addon-storysource",
            options:
            {
                include: [path.resolve(__dirname, "../../src/")],
                loaderOptions:
                {
                    parser: "typescript",
                    prettierConfig:
                    {
                        printWidth: 100,
                        tabWidth: 4
                    }
                }
            }
        },
        {
            name: '@storybook/preset-typescript',
            options:
            {
                tsLoaderOptions:
                {
                    configFile: path.resolve(__dirname, '../tsconfig.json'),
                },
                tsDocgenLoaderOptions:
                {
                    tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
                },
                include: [path.resolve(__dirname, "../../src")]
            }
        }
    ]
}

[AlexanderMelox]

I am also having this error when adding story source

[aravij]

I am planning to move to MDX stories. They have <Preview> component, which include story source automatically. But I havn't figured out yet, does it support Typescript, or at least plain Javascript (without React or Vue).

https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/mdx.md#writing-stories

[shilman]

@aravij MDX does not support typescript. You can write your components in TS and use JS inside the MDX file. You can also achieve the same Preview behavior in DocsPage with the right configuration. source-loader got an overhaul in 6.0 (currently in alpha) so you might try upgrading to see if it fixes your issue.