Docs tab shows 'no code available' when using CSF format

[mattwaler]

Describe the bug

When composing a story using new CSF format, all stories show no code available.

To Reproduce
Steps to reproduce the behavior:

1. Compose story
2. Start storybook
3. Go to Docs tab

Expected behavior

Like in the screenshots and docs, code previews should be available to view and copy.

Screenshots

System:

Environment Info:

  System:
    OS: macOS 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
  Binaries:
    Node: 12.4.0 - ~/.nvm/versions/node/v12.4.0/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v12.4.0/bin/npm
  Browsers:
    Chrome: 76.0.3809.132
    Firefox: 68.0.2
    Safari: 12.1.2
  npmPackages:
    @storybook/addon-actions: ^5.2.0 => 5.2.0 
    @storybook/addon-docs: ^5.2.0 => 5.2.0 
    @storybook/addon-links: ^5.2.0 => 5.2.0 
    @storybook/addon-notes: ^5.2.0 => 5.2.0 
    @storybook/addons: ^5.2.0 => 5.2.0 
    @storybook/react: ^5.2.0 => 5.2.0 

[shilman]

Can you share your preset and config files?

[mattwaler]

// addons.js
import '@storybook/addon-actions/register'
import '@storybook/addon-links/register'

// config.js
import { configure } from '@storybook/react'
configure(require.context('../src/stories', true, /\.stories\.(js|mdx)$/), module)

// presets.js
module.exports = [
  {
    name: '@storybook/addon-docs/react/preset',
    options: {
      configureJSX: true,
      babelOptions: {},
      sourceLoaderOptions: null,
    },
  },
]

[goszczynskip]

I have very similar situation but with typescript configuration. Everything is working fine except code part.

I'm not using presets. My stories are placed in src/components directory.

My webpack.config.js:

const path = require("path");

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve('babel-loader'),
        options: {
          presets: [['react-app', { flow: false, typescript: true }]]
        }
      },
      {
        loader: require.resolve('react-docgen-typescript-loader')
      }
    ]
  });

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

  config.resolve.extensions.push('.ts', '.tsx');

  return config;
};

[karthikbalajikb]

facing the same issue

[riandy-dimas]

I do have the same issue using typescript preset, ended up in moving to write in MDX

[goszczynskip]

I've found bug in my config. I changed test: /\.(stories|story)\.[tj]sx?$/, in source-loader config to test: /\.[tj]sx?$/. After that source code appears in stories.

Also I think docs are wrong. Source-loader test regexp should be set to match sources and stories instead of stories only.

EDIT: source-loader shouldn't be set for something else than stories. In my case regexp wasn't matching stories files.

[shilman]

@mattwaler sorry for the slow reply. this line from your preset is disabling the source loader, so there's no code to show:

sourceLoaderOptions: null,

[shilman]

@goszczynskip i don't think so. source-loader is about loading the source for stories only. if you set it to load the source for your components it will slow down your builds etc. i suspect there's some other problem with your setup.

[goszczynskip]

@shilman You are right. There was other problem. I've just used regexp with starting dot but my stories are like: story.tsx.

My working configuration with Typescript, MDX and sources. Maybe someone wants to copy it.

const path = require('path');
const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');

const docgenLoader = {
  loader: require.resolve('react-docgen-typescript-loader'),
  options: {
    propFilter: prop => {
      // Filter out props from styled-components
      if (prop.name === 'as' || prop.name === 'ref' || prop.name === 'theme') {
        return false;
      }

      if (prop.parent == null) {
        return true;
      }

      // Filter out props which type definition is placed in react package
      return prop.parent.fileName.indexOf('node_modules/@types/react') < 0;
    }
  }
};

const babelLoader = {
  loader: require.resolve('babel-loader'),
  options: {
    presets: [['react-app', { flow: false, typescript: true }]]
  }
};

const mdxLoader = {
  loader: '@mdx-js/loader',
  options: {
    compilers: [createCompiler({})]
  }
};

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(mdx)$/,
    use: [babelLoader, docgenLoader, mdxLoader]
  });

  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [babelLoader, docgenLoader]
  });

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

  config.resolve.extensions.push('.ts', '.tsx');

  return config;
};

[larswittenberg]

@mattwaler sorry for the slow reply. this line from your preset is disabling the source loader, so there's no code to show:

sourceLoaderOptions: null,

thx. this works for me.

[stale]

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!

[Elijen]

Same problem here. We use a custom Webpack config for TypeScript support in stories.

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: "babel-loader"
  });
  config.resolve.extensions.push(".ts", ".tsx");
  return config;
};

[stale]

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!

[jeffryang24]

Still got no code available while using CSF format (Docs mode). But, when I switched to Canvas mode, the story source existed.

webpack.config.js

// Core(s)
const path = require('path');
const createMDXCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');

// Summary
module.exports = async ({ config }) => {
  config.module.rules.push(
    {
      test: /\.stories\.mdx$/,
      use: [
        {
          loader: 'babel-loader',
          // May or may not need this line depending on your app's setup
          options: {
            plugins: ['@babel/plugin-transform-react-jsx']
          }
        },
        {
          loader: '@mdx-js/loader',
          options: {
            compilers: [createMDXCompiler({})]
          }
        }
      ]
    },
    {
      test: /\.stories\.tsx?$/,
      use: [
        {
          loader: require.resolve('@storybook/source-loader'),
          options: {
            parser: 'typescript',
            prettierConfig: {
              arrowParens: 'avoid',
              printWidth: 80,
              tabWidth: 2,
              bracketSpacing: true,
              trailingComma: 'none',
              singleQuote: true,
              semi: true,
              jsxBracketSameLine: false
            }
          }
        }
      ],
      enforce: 'pre',
      include: path.resolve(__dirname, '../src')
    },
    {
      test: /\.tsx?$/,
      use: [
        {
          loader: require.resolve('babel-loader'),
          options: {
            presets: [
              [
                require.resolve('babel-preset-react-app'),
                { flow: false, typescript: true }
              ]
            ]
          }
        },
        require.resolve('react-docgen-typescript-loader')
      ]
    },
    {
      test: /\.s[ac]ss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../')
    }
  );

  config.resolve.extensions.push('.ts', '.tsx');

  return config;
};

button.tsx

import React, { ReactNode, FunctionComponentElement } from 'react';

export type Props = {
  /**
   * Children
   */
  children?: ReactNode;
};

export function Button({ children }: Props): FunctionComponentElement<Props> {
  return <button type="button">{children}</button>;
}

export default Button;

button.stories.tsx

import React, { FunctionComponent } from 'react';
import { text } from '@storybook/addon-knobs';

import { Button } from './button';

export default { title: 'Genesis|Button', component: Button };

export const withText: FunctionComponent = () => <Button>Hello Button</Button>;

export const withEmoji: FunctionComponent = () => (
  <Button>
    <span role="img" aria-label="so cool">
      😀 😎 👍 💯
    </span>
  </Button>
);

export const withKnobs: FunctionComponent = () => (
  <Button>{text('children', 'Test Children')}</Button>
);

🙇‍♂️

[shilman]

@jeffryang24 your webpack config adds source-loader, but addon-docs also adds source-loader. I'd suggest removing yours, or disabling the one in addon-docs per https://github.com/storybookjs/storybook/blob/next/addons/docs/README.md#preset-options

[jeffryang24]

@jeffryang24 your webpack config adds source-loader, but addon-docs also adds source-loader. I'd suggest removing yours, or disabling the one in addon-docs per https://github.com/storybookjs/storybook/blob/next/addons/docs/README.md#preset-options

I see... Will try to disable one of them. Will report the result back, probably this night (GMT+7)... 🙇‍♂️

[patrick-radulian]

I have a running storybook installation as per instructions here: https://gist.github.com/shilman/bc9cbedb2a7efb5ec6710337cbd20c0c

Currently I also see no code preview in the stories when using CSF - it only works properly when using MDX instead.

[shilman]

@patrick-radulian I have updated the gist, specifically this part, to reflect recent changes in addon-docs:

  {
    name: "@storybook/addon-docs/preset",
    options: {
      configureJSX: true,
    }
  }

I also tested it with a clean setup & verified that it's working

[jeffryang24]

@jeffryang24 your webpack config adds source-loader, but addon-docs also adds source-loader. I'd suggest removing yours, or disabling the one in addon-docs per https://github.com/storybookjs/storybook/blob/next/addons/docs/README.md#preset-options

Hmm... Actually, I don't use the default preset, @storybook/addon-docs/preset and I don't have presets.js. I follow the manual installation from the docs (before this new doc with main.js 😆). I will try update the storybook to v5.2.8

[jeffryang24]

@jeffryang24 your webpack config adds source-loader, but addon-docs also adds source-loader. I'd suggest removing yours, or disabling the one in addon-docs per https://github.com/storybookjs/storybook/blob/next/addons/docs/README.md#preset-options

Here's my full config: https://gist.github.com/jeffryang24/2147d8dbed6189ba6cc9a022ec79ac11 🙇‍♂️. Still got no luck... Oh, yes. My project is a monorepo and has only one tsconfig.json in the root dir.... Does it cause this issue?

[jeffryang24]

Still got no code available while using CSF format (Docs mode). But, when I switched to Canvas mode, the story source existed.

webpack.config.js

// Core(s)
const path = require('path');
const createMDXCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');

// Summary
module.exports = async ({ config }) => {
  config.module.rules.push(
    {
      test: /\.stories\.mdx$/,
      use: [
        {
          loader: 'babel-loader',
          // May or may not need this line depending on your app's setup
          options: {
            plugins: ['@babel/plugin-transform-react-jsx']
          }
        },
        {
          loader: '@mdx-js/loader',
          options: {
            compilers: [createMDXCompiler({})]
          }
        }
      ]
    },
    {
      test: /\.stories\.tsx?$/,
      use: [
        {
          loader: require.resolve('@storybook/source-loader'),
          options: {
            parser: 'typescript',
            prettierConfig: {
              arrowParens: 'avoid',
              printWidth: 80,
              tabWidth: 2,
              bracketSpacing: true,
              trailingComma: 'none',
              singleQuote: true,
              semi: true,
              jsxBracketSameLine: false
            }
          }
        }
      ],
      enforce: 'pre',
      include: path.resolve(__dirname, '../src')
    },
    {
      test: /\.tsx?$/,
      use: [
        {
          loader: require.resolve('babel-loader'),
          options: {
            presets: [
              [
                require.resolve('babel-preset-react-app'),
                { flow: false, typescript: true }
              ]
            ]
          }
        },
        require.resolve('react-docgen-typescript-loader')
      ]
    },
    {
      test: /\.s[ac]ss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../')
    }
  );

  config.resolve.extensions.push('.ts', '.tsx');

  return config;
};

button.tsx

import React, { ReactNode, FunctionComponentElement } from 'react';

export type Props = {
  /**
   * Children
   */
  children?: ReactNode;
};

export function Button({ children }: Props): FunctionComponentElement<Props> {
  return <button type="button">{children}</button>;
}

export default Button;

button.stories.tsx

import React, { FunctionComponent } from 'react';
import { text } from '@storybook/addon-knobs';

import { Button } from './button';

export default { title: 'Genesis|Button', component: Button };

export const withText: FunctionComponent = () => <Button>Hello Button</Button>;

export const withEmoji: FunctionComponent = () => (
  <Button>
    <span role="img" aria-label="so cool">
      😀 😎 👍 💯
    </span>
  </Button>
);

export const withKnobs: FunctionComponent = () => (
  <Button>{text('children', 'Test Children')}</Button>
);

cc: @shilman
Could be #7829? Since I used typescript for this project. https://gist.github.com/jeffryang24/2147d8dbed6189ba6cc9a022ec79ac11 🙇‍♂️

[gaurav5430]

In my project I am overriding the default storybook webpack config with my own custom webpack config. This meant that any of the default module.rules from storybook webpack config were not being applied. Due to this the source-loader rule was also not being applied, and DocsPage was showing 'No code available' .

I re-added the source-loader rule and it works fine.

[andre-brdoch]

ran into the same issue like @Vanuan on v6.0.21. It works if the storyname includes the name of the component. However, our folder structure is like this:

/MyComponent
--> index.vue
--> stories.js

I am no webpack expert, could someone point me into a direction how to fix this without changing folder structure? 😃

EDIT:
It worked by manually adding source-loader:

config.module.rules.push({
  test: /(.*\.)?stories\.js$/,
  loaders: [ '@storybook/source-loader' ],
});

[Vanuan]

@andre-brdoch Maybe try changing loaders[x][y].test to a constant, e.g. "stories.js".

Or, if you're willing to contribute, change this line:

storybook/addons/docs/src/frameworks/common/preset.ts

Line 65 in 57798a1

test: /\.(stories|story)\.[tj]sx?$/,

To the following:

          test: /\.?(stories|story)\.[tj]sx?$/,

[pwfisher]

@Vanuan

@andre-brdoch Maybe try changing loaders[x][y].test to a constant, e.g. "stories.js".

Or, if you're willing to contribute, change this line:

storybook/addons/docs/src/frameworks/common/preset.ts

Line 65 in 57798a1

test: /\.(stories|story)\.[tj]sx?$/,

To the following:

          test: /\.?(stories|story)\.[tj]sx?$/,

but that would match, for example, History.tsx.

Assuming this tests a path and not a filename alone:

          test: /(/|\.)(stories|story)\.[tj]sx?$/,

[pwfisher]

Add the following to /.storybook/webpack.config.js:

// /.storybook/webpack.config.js
module.exports = ({ config }) => {
  config.module.rules.push({
    test: /(\/|\.)(stories|story)\.[tj]sx?$/,
    use: '@storybook/source-loader',
  })
  return config
}

[Vanuan]

@pwfisher Good catch!

[shilman]

@pwfisher @Vanuan what if you just add \/story.[tj]sx? i'm afraid that the source-loader would get run twice on e.g. Foo.stories.tsx because addon-docs already adds a rule for that.

[penx]

I'm finding that if I have a story as follows:

export const Start: Story = () => (
  <Button start>
    Save and continue
  </Button>
);

Then I get "No code available". But if I add an unused args parameter to the function:

export const Start: Story = (args) => (
  <Button start>
    Save and continue
  </Button>
);

Then "Show code" is displayed.

Not sure if this is a bug or a feature @shilman ? 😀

[shilman]

@penx it's a feature. you can read more about it here:

https://storybook.js.org/docs/react/writing-docs/doc-blocks#docspage-1

dynamic snippet rendering was introduced at the last minute in storybook 6.0 to fix a broken user experience for args stories, which were introduced in 6.0. however, because the feature was immature, i didn't want to break the experience for existing 5.x users writing no-args stories. now that dynamic snippets are fairly stable, we can probably make them the default and users can opt-in to source snippets when they need them. i'll consider this seriously as part of the 7.0 release.

[yannbf]

@shilman I found another scenario where it does not show code. When using a custom DocsContainer:

import { DocsContainer } from '@storybook/addon-docs';

export const parameters = {
  docs: {
    container: (props) => <DocsContainer {...props} />,
  },
};

Seems like a bug?

[isaacebhodaghe]

@shilman I found another scenario where it does not show code. When using a custom DocsContainer:

import { DocsContainer } from '@storybook/addon-docs';

export const parameters = {
  docs: {
    container: (props) => <DocsContainer {...props} />,
  },
};

Seems like a bug?

Is there a solution to this, I'm facing this same senerio