Confused react type names on Flow and Typescript

[xiaoshuangLi]

Hi, I try convert react-docgen props to JSON-schema. But in typescript and flow, we get different names by different ways to program.Just like this. This ReactReactNode makes me so confused. How should i do with it ?

import React, { ReactNode, Component } from 'react';

interface Props {
  content: ReactNode,
  children: React.ReactNode,
}

class TSReactComponent extends Component<Props> {
  render() {
    return (
      <div>hello world</div>
    );
  }
}

export default TSReactComponent;

react-docgen result

{
  "description": "",
  "displayName": "TSReactComponent",
  "methods": [],
  "props": {
    "content": {
      "required": true,
      "flowType": {
        "name": "ReactNode"
      },
      "description": ""
    },
    "children": {
      "required": true,
      "flowType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    }
  }
}

[greypants]

I'm also having issues where the parser is thinking I'm using Flow when I'm using typescript. As a result, I get parsing errors because not all TypeScript is valid Flow syntax.

[greypants]

I worked around this by looking at the react-docgen demo code, and noticing that they were passing parserOptions.plugins, and manually specifying the language there:

This ended up working for me:

parse(sourceString, undefined, undefined, {
  filename,
  parserOptions: { plugins: ["jsx", "typescript"] }
})

But you would think it would just infer it from the filename...

[av-k]

The same problem.
Was fixed styleguide.config.js
implementing the next changes:

module.exports = {
  // some code
  propsParser: (filePath, source, resolver, handlers) => {
    const {ext} = path.parse(filePath);
    const result = docgen.parse(
      source,
      resolver,
      handlers,
      {
        filename: filePath,
        parserOptions: {
          plugins: ['jsx', 'typescript'],
        },
      },
    );

    return result;
  },
};

Thanks to the author above.