Storybook: Addon-docs: Oh no! The source is not available.

[rwieruch]

I tried the new Storybook addon-docs in Alpha version 35. Everything works as expected! However, I don't see the source code of the Story. I guess it isn't implemented yet, is it? If it is implemented, do I need to add something to my story?

storiesOf('1. Atoms|01. Buttons/1. ContentButton', module)
  .addParameters({ component: ContentButton })
  .add('01. default', () => {
    const props = {
      label: text('label', 'Button'),
      onClick: () => {},
      selected: boolean('selected', false),
      disabled: boolean('disabled', false),
    };

    return <ContentButton {...props} />;
  });

[shilman]

@rwieruch What does your webpack.config.js look like? This works but it's still a little rough around the edges. You need to add source-loader like this: https://github.com/storybookjs/storybook/blob/next/examples/official-storybook/webpack.config.js#L42

EDIT it might have broken in a recent release cc @libetl . I'll try to look into it in the next few hours.

[rwieruch]

That's my .storybook/webpack.config.js:

module.exports = ({ config }) => {
  config.module.rules.push(
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: ['babel-loader'],
    },
    {
      test: /stories\.(js|jsx)?$/,
      loaders: [require.resolve('@storybook/addon-storysource/loader')],
      enforce: 'pre',
    },
    // No other file loaders needed, because they are mocked for Jest
  );

  // https://github.com/storybookjs/storybook/issues/7092
  config.devtool = 'eval';

  return config;
};

Thanks for your quick reply @shilman 👍

[shilman]

This line:

      loaders: [require.resolve('@storybook/addon-storysource/loader')],

Needs to be updated to:

      loader: require.resolve('@storybook/source-loader'),
      options: {
        injectParameters: true,
        inspectLocalDependencies: false,
        inspeectDepndencies: false,
      },

Along with adding @storybook/source-loader as a dependency. We've refactored out that part into a separate package that will be shared by addon-storysource and addon-docs. However, we're still getting it all working. I'll update here when I think it's stabilized.

[libetl]

If you do that you lose the storysource addon
I have a pending PR #7272 to make both work at once (storysource and docs sharing the same source-loader)

[JabbyPanda]

Probably storybook source addon does not work out of the box together with storiesOf API from storybook, at least that what I've experiences with Storybook source [email protected].

When I use storiesOf API, I get only limited content from my story under source tab

Can you try to write story for your component without relying on storiesOf and get back here with results ?

[shilman]

@jabbypanda you should be using the same version of all @storybook/* packages if possible. PR #7272 brings the storysource and docs add-ons up to date and dependent on the same source-loader package. Will merge and update this issue once it's stable.

[JabbyPanda]

@JabbyPanda you should be using the same version of all @storybook/* packages if possible

Yes, we follow this rule of thumb across all of our projects.
The project I referred to above is using Storybook 4 (was not yet migrated to Storybook 5)

[benjamingeorge]

I followed the google doc for getting addon-docs setup. I'm using version 5.2.0-beta.7 for all required packages (this is a new project). The story source doesn't seem to work with typescript.

presets.js

module.exports = [
    '@storybook/preset-typescript',
    {
        name: '@storybook/addon-docs/react/preset',
        options: {
            configureJSX: true,
        },
    },
];

webpack.config.js

const path = require('path');

module.exports = async ({ config }) => {
    config.module.rules.push({
        test: /\.stories\.[tj]sx?$/,
        loader: require.resolve('@storybook/source-loader'),
        options: {
            injectParameters: true,
            inspectLocalDependencies: false,
            inspectDependencies: false,
        },
        include: [path.resolve(__dirname, '../src')],
        enforce: 'pre',
    });
    return config;
};

The props table is populated by the Typescript interfaces used for the props so that works correctly. Just the source doesn't show up.

[shilman]

@benjamingeorge that's strange! Got a repo I can look at? Or wanna hop onto our Discord and we can debug it together interactively?

[benjamingeorge]

Sure here is a pared down version https://github.com/benjamingeorge/ts-addon-docs

[shilman]

@benjamingeorge Your include path is wrong:

    include: [path.resolve(__dirname, "../src")],

For your project structure should be:

    include: [path.resolve(__dirname, "../stories")],

[benjamingeorge]

Wow. Thats embarrassing. Thank you.

[polRk]

What about CRA preset ? How can i fix this problem ?

Solved.

Add webpack.config.js in .storybook folder

const path = require('path');

module.exports = async ({ config }) => {
    config.module.rules.push({
        test: /\.stories\.[tj]sx?$/,
        loader: require.resolve('@storybook/source-loader'),
        options: {
            injectParameters: true,
            inspectLocalDependencies: false,
            inspectDependencies: false,
        },
        include: [path.resolve(__dirname, '../src')],
        enforce: 'pre',
    });
    return config;
};