Props table is not coming

[gmukul01]

trafficstars

Proptable is not coming when I am using babel 7 to transpile the typescript file. Github link for the code.

My webpack config file for the storybook is like this

const path = require('path');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

const packages = path.resolve(__dirname, '../', 'packages');
const utils = path.resolve(__dirname, '../', '.storybook/utils');

module.exports = ({ config, mode }) => {
    config.module.rules.push({
        test: /\.(ts|tsx)$/,
        include: [packages, utils],
        exclude: [/node_modules/, /\.test.tsx?$/, /__snapshots__/, /__tests__/, /__dist__/],
        use: ['babel-loader', 'stylelint-custom-processor-loader', 'react-docgen-typescript-loader']
    });
    config.plugins.push(new ForkTsCheckerWebpackPlugin());

    config.resolve.extensions.push('.ts', '.tsx');
    config.resolve.plugins = [new TsconfigPathsPlugin()];

    return config;
};

My Code for the component looks like this

import { WithStyle } from '@core-utils/types';
import React from 'react';
import Text from '../Text';
import { ButtonStyled } from './Button.styled';
import { Props } from './types';

import { isValidStringOrNumber } from '@core-utils/helpers/ReactHelper';

export const Button: React.SFC<Props> & WithStyle = props => {
    return (
        <ButtonStyled {...props}>
            {React.Children.map(props.children, c => {
                return isValidStringOrNumber(c) ? (
                    <Text textWeight="Strong" uppercase>
                        {c}
                    </Text>
                ) : (
                    c
                );
            })}
        </ButtonStyled>
    );
};
Button.displayName = 'Button';
Button.Style = ButtonStyled;

export default Button;

And types file looks like this

import { HTMLProps, WithThemeProp } from '@core-utils/types';

export interface Props extends HTMLProps<HTMLButtonElement>, WithThemeProp {
    type?: 'button' | 'reset' | 'submit';
    solid?: boolean;
    flat?: boolean;
    outlined?: boolean;
}

[kamranayub]

So this was the issue for me: https://stackoverflow.com/a/57574625/109458

I had to switch to named imports for FC, SFC, etc.

- import React from 'react'
+ import React, { SFC } from 'react'

- export const Button: React.SFC<Props>
+ export const Button: SFC<Props>

It would be great to get this fixed so we can use React.* default import.

I can submit a PR to add this to the caveats section of the Readme, since the examples show usage of React.SFC (which normally might work but doesn't when using babel-loader).

[sergiop]

@kamranayub same with:

- import React from 'react'
+ import React, { FunctionComponent } from 'react'
 
- export const Button: React.FunctionComponent<Props>
+ export const Button: FunctionComponent<Props>

I lost two days to understand why props table doesn't show 🤬, until I found your comment here. Thanks!