Storybook: addon-docs: "No props found for this component" using TypeScript

[gibbok]

Describe the bug

Table with component properties is not created and visible in StoryBook "Docs" tab on a project setup with TypeScript.

Text ""No props found for this component" is shown instead (please look at screenshot attached).

Expected behavior

"Docs" tab in StoryBook should show a tablet with a list of properties for the component.

Screenshots

Code snippets

Test.tsx

import * as React from 'react';

type TestProps = {
  /**
  * Description of prop "name".
  */
  name: string;
};

export function Test({ name }: TestProps) {
  return <div>{name}</div>;
}

Test.stories.tsx

import { storiesOf } from '@storybook/react';
import * as React from 'react';
import { Test } from './Test';

storiesOf('00_Test', module)
  .addParameters({ component: Test })
  .add('Test', () => <Test name="Hello world!" />);

System:

System:
    OS: macOS 10.15.4
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v10.16.0/bin/npm
  Browsers:
    Chrome: 83.0.4103.61
    Firefox: 76.0.1
    Safari: 13.1
  npmPackages:
    @storybook/addon-actions: ^5.3.19 => 5.3.19
    @storybook/addon-docs: ^5.3.19 => 5.3.19
    @storybook/addon-info: ^5.3.19 => 5.3.19
    @storybook/addon-knobs: ^5.3.19 => 5.3.19
    @storybook/addon-links: ^5.3.19 => 5.3.19
    @storybook/addon-storyshots: ^5.3.19 => 5.3.19
    @storybook/addons: ^5.3.19 => 5.3.19
    @storybook/react: ^5.3.19 => 5.3.19
    @storybook/theming: ^5.3.19 => 5.3.19

Additional context

package.json

"react": "^16.12.0",
"react-dom": "^16.12.0",
"typescript": "^3.7.5"
"react-docgen-typescript-loader": "^3.7.2",
"react-docgen-typescript-webpack-plugin": "^1.1.0"

.storybook/main.js

module.exports = {
  stories: ['../src/**/*.stories.tsx'],
  addons: [
    '@storybook/addon-actions/register',
    '@storybook/addon-knobs/register',
    '@storybook/addon-docs'
  ]
};

.storybook/webpack.config.js

module.exports = ({ config }) => {
  addons: [
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true,
        babelOptions: {},
        sourceLoaderOptions: null,
      },
    },
  ],
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve("awesome-typescript-loader")
      },
    ]
  });
  config.resolve.extensions.push(".ts", ".tsx");
  return config;
};

[rikkit]

I believe you need to configure react-docgen-typescript-loader. I'm just doing this myself. https://www.npmjs.com/package/@storybook/addon-docs#typescript-configuration

[gibbok]

Thanks for your answer, actually you are right I added answer to my original question here:
https://stackoverflow.com/questions/62067059/storybook-addon-docs-no-props-found-for-this-component-using-typescript

[shilman]

For anybody who's struggling with typescript and props tables, I'd highly recommend upgrading to the latest 6.0-beta. We've added zero-config typescript support and have made the whole thing much less error prone.

• Release 6.0.0-beta.12+
• Migration instructions
• Updated docs