Docz: Unable to generate PropsTable for React component (TypeScript)

[sergioalvz]

Question

Hi there,

first of all: this project looks quite impressive, congrats! :)

I'm having a bad time, though, trying to generate a props table for a _dummy_ React component by using TypeScript. I have read the docs as well as many (some-how) related issues and I think the project configuration is right, but I may have misunderstood something 🤔

Description

These are the related files:

doczrc.js

import { babel } from 'docz-plugin-babel6';

export default {
  plugins: [babel()],
  typescript: true,
};

Dummy.tsx:

import React from 'react';

enum Roles {
  Banner = 'banner',
  Link = 'link',
}

interface DummyProps {
  children?: React.ReactNode;
  role: Roles;
}

const Dummy: React.SFC<DummyProps> = ({ children, role }: DummyProps) => {
  return <h1 role={role}>{children}</h1>;
};

export default Dummy;

Dummy.mdx:

---
name: Dummy
---

import { Playground, PropsTable } from 'docz'

import Dummy from './Dummy'

# Dummy

## Properties

<PropsTable of={Dummy} />

## Usage

<Playground>
  <Dummy role="banner">Hello world!</Dummy>
  <Dummy role="link"><a href="#">Home</a></Dummy>
</Playground>

The build runs smoothly (no errors) but the resulting documentation does not show the PropsTable. I have been doing several variations between:

• Functional vs Regular component
• Named vs default export

But none of them worked so any help would be much appreciated. I have run out of ideas 😓

Thanks!

[pedronauck]

Fixed on v0.5.7

[Ponjimon]

This is still not working for me.

[jochienabuurs]

try changing the import of react in Dummy.tsx from
import React from 'react';
to
import * as React from 'react';

[Glinkis]

This is still not working for me. Neither did @jochienabuurs suggestion.