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

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.

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

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

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

or ‘stories.ts’ if you use type script

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)

I faced the same issue with storybook 6.

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

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 🤟