No propTypes defined

[DimaBur]

I'm using react-docgen-typescript-loader with the following configurations. In Storybook props are shown only is there are propTypes defined, but in I do it on TypeScript as interface Props {...} in info is written No propTypes defined!. Have tried to use with ts-loader or awesome-typescript-loader nothing changes.

@storybook/react": "^5.1.1

webpack.config.js

const autoprefixer = require('autoprefixer');
const alias = require('./alias');
const paths = require('./paths');
const webpack = require('webpack');

module.exports = ({config}) => {
  const rules = config.module.rules;

  rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve('awesome-typescript-loader'),
      },
      {
        loader: require.resolve("react-docgen-typescript-loader"),
      }
    ],
  });

  rules.push({
    test: /\.styl$/,
    use: [
      {
        loader: 'style-loader', // creates style nodes from JS strings
      },
      {
        loader: 'css-loader',
        options: {
          modules: true,
          importLoaders: 2,
          sourceMap: true,
          localIdentName: '[local]__[hash:base64:5]-[emoji:1]',
        },
      },
      {
        loader: require.resolve('postcss-loader'),
        options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebookincubator/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            autoprefixer({
              browsers: [
                '>1%',
                'last 4 versions',
                'Firefox ESR',
                'not ie < 9', // React doesn't support IE8 anyway
              ],
              flexbox: 'no-2009',
            }),
          ],
        },
      },
      {
        loader: 'stylus-loader',
      },
    ],
  });

  rules.push({
    test: /\.svg$/,
    loader: 'svg-react-loader'
  });

  const fileLoaderRule = rules.find(rule => rule.test.test('.svg'));
  fileLoaderRule.exclude = /\.svg$/;

  config.plugins.push(
    new webpack.LoaderOptionsPlugin({
      options: {
        stylus: {
          import: [paths.assets + '/styles/app']
        }
      }
    })
  );

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

  return config;
};

config.js

import React from 'react';
import { configure, setAddon, addDecorator } from '@storybook/react';
import JSXAddon from 'storybook-addon-jsx';
import { withInfo } from '@storybook/addon-info';

setAddon(JSXAddon);
addDecorator(withInfo({inline: true}));
addDecorator(story => <div style={{ padding: '10rem' }}>{story()}</div>)

function loadStories() {
  const req = require.context('../src/components', true, /\.stories\.js$/);

  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

[mgambati]

Same, even with @storybook/typescript-preset.

[gregoryBernard]

Same here; even using babel-loader. Did anyone manage to make it work? Not using CRA here. Using latest React and Typscript.

[gregoryBernard]

Addon docs is working well with this webpack configuration if some need

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: 'babel-loader',
        options: {
          presets: [
            '@babel/preset-env',
            '@babel/preset-typescript',
            '@babel/preset-react',
          ]
        }
      },
      'react-docgen-typescript-loader'
    ]
  });

  config.module.rules.push({
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader'],
  });

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

[gal1419]

I'm having the exact same problem. I'm using the latest versions of TS, Storybook (+ relevant plugins), React. I've tried with babel-loader, ts-loader, and awesome-typescript-loader. That was working before and was started in 5.1 if I'm not mistaken.

[gregoryBernard]

@gal1419 I also seen when you don't export component directly I say this error. Cau you try this:

import React from "react";

import './Button.scss';

interface FancyButtonProps {
  /**
   * onPress function handler
   */
  click?: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
  /**
   * Set disabled button
   */
  disabled: boolean;

  /**
   * Text displayed in button
   */
  text: string;

  /**
   * CSS properties to apply to button
   */
  style?: React.CSSProperties;
}

/**
 * The world's most beautiful button 
 */
export const FancyButton = ({disabled = false, text = 'Click me', style, click}: FancyButtonProps) => (
  <button disabled={disabled} style={style} className='fancy-button' onClick={click}>
    {text}
  </button>
);

export default FancyButton;

With config I mentionned previously

[gal1419]

@gregoryBernard thanks for the info, however, we don't use default exports, so that is not an option for us.