Prop table not being rendered with typescript

[bobrown101]

I insert

<!-- PROPS -->

....and nothing gets rendered. I inspected it a little and it seems as if we are getting null as the props array

[tuchk4]

Could you please show the component?

[bobrown101]

Sorry about that. Here it is

import React, {Component} from 'react'

interface P {
  children: React.ReactNode
}
export class Button extends Component<P>{
  render() {
    return <button>{this.props.children}</button>
  }
}
export default Button

[bobrown101]

Here is my addons.js file

import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-a11y/register';
import 'storybook-readme/register';

Here is my config.js file

import { configure, addDecorator } from '@storybook/react';
import { withA11y } from '@storybook/addon-a11y';
import { addReadme, configureReadme } from 'storybook-readme';
import React from 'react';
import { addParameters } from '@storybook/react';

configureReadme({
  /**
   * Wrapper for story. Usually used to set some styles
   */
  StoryPreview: ({ children }) => <div>{children}</div>,

  /**
   * Wrapper for content and sidebar docs. Usually used to set some styles
   */
  DocPreview: ({ children }) => (
    <div style={{ background: '#000' }}> 
    {children}
    </div>
  ),

  /**
   * Wrapper for hedaer docs. Usually used to set some styles
   */
  HeaderPreview: ({ children }) => (
    <div style={{ background: 'red' }}>{children}</div>
  ),

  /**
   * Wrapper for footer docs. Usually used to set some styles
   */
  FooterPreview: ({ children }) => <div>{children}</div>,

  /**
   * Header docs in markdown format
   */
  header: '',

  /**
   * Footer docs in markdown format
   */
  footer: '',
});

addParameters({
  readme: {
    // You can set a code theme globally.
    codeTheme: 'github',
  },
});

addDecorator(withA11y)
addDecorator(addReadme);

function loadStories() {
  const req = require.context('../src/components', true, /.*\.story\.tsx$/);
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

Here is my webpack.config.js

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve('awesome-typescript-loader'),
      },
      // Optional
      {
        loader: require.resolve('react-docgen-typescript-loader'),
      },
    ],
  });
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

[mysteryven]

I met same problem.

[jsux]

is there solution for it ?

[foxleigh81]

I too am having this problem.