Not pulling props

[dhanson358]

Hope I'm not being daft and missing something obvious here, but I'm following the README and not having luck getting this to operate like I would expect.

Given a simple test component app/javascript/components/Form/TextInput/TextInput.tsx:

import React from 'react';
import FieldText from '@atlaskit/field-text'

export interface ITextInputProps {
  /**
   * Name of field
   *
   * @default "input"
   **/
  name: string,
}

/**
 * Simple form input
 */
export class TextInput extends React.Component<ITextInputProps> {

  render() {
    return (
      <FieldText
        {...this.props}
      />
    );
  }
}

export default TextInput;

and it's story app/javascript/components/Form/TextInput/TextInput.stories.js

import React from 'react';

import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';

import TextInput from './TextInput'

const stories = storiesOf("Form", module);

stories.add('TextInput', withInfo()(() => (
    <TextInput
      label="Required with default value"
      required
      pattern="[A-Z]{3}"
      value="A default value!"
      name="example-text"
    />
  )));

and the .storybook/webpack.config.js of

const path = require("path");

module.exports = (baseConfig, env, config) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    include: path.resolve(__dirname, "../app/javascript"),
    use: [
      require.resolve("ts-loader"),
      require.resolve("react-docgen-typescript-loader"),
    ],
  });
  config.resolve.extensions.push(".ts", ".tsx");

  return config;
};

and stories/index.stores.js of

import React from 'react';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';
import { withInfo, setDefaults } from '@storybook/addon-info';

setDefaults({
  header: false, // Toggles display of header with component name and description
  inline: true,
});

I'm getting the story, but no props displayed:

Appreciate any guidance!

[strothj]

Hello,

On first glance, can you try changing this:

export interface ITextInputProps {
  /**
   * Name of field
   *
   * @default "input"
   **/
  name: string,
}

to this:

export interface ITextInputProps {
  /**
   * Name of field
   *
   * @default "input"
   */
  name: string,
}

Notice the single asterisks at the bottom of the jsdoc. The detection for jsdocs is handled by the TypeScript compiler, so maybe that has something to do with it.

I'll be unavailable to look into this further for the remainder of the day due to a deadline. I can followup tomorrow if you're still having an issue.

Even better would be a sample repo I can have a look at. Everything else looks good to me.

[dhanson358]

Changing the asterisks did not impact it. I'll see if I can pull together a repo... it's a bit more complicated because I'm using Webpacker on a rails project for this (which could be part of the issue). I may try it with a "clean" non-rails project and see if I get a different result?

[strothj]

@dhanson358 Were you still interested in working this issue out? Let me know so I can close this issue or see what else I can do to assist you.

[dhanson358]

Yeah I'm still stuck on this, would appreciate any guidance you can provide.

[StevenLangbroek]

We're experiencing this same issue. There seems to be a difference in the way class components are handled vs functional components too. I'll add more info after debugging a bit further with my colleague.

[strothj]

Any information you can provide would be awesome.

If you feel you need to add a way to get some debug output easier, feel free to make a pull request for that.

[StevenLangbroek]

So I just updated all our deps, this is the versions we're using (I've tried upgrading to webpack 4 but I can't, it's not a direct dependency):

• webpack: 3.10.0
• awesome-typescript-loader: 3.5.0

So for us it works for functional components, but not for class components (typed as class MyComponent extends React.Component<IProps, IState>{}. What further info can I provide you that would make a fix easier?

[strothj]

Thanks for taking the time to get that information for me.

A minimal reproduction in a repo would help a lot. This library passes along the source code to a third party package, then inserts a generated code snippet. I'd like to get my hands on a sample repo to determine where the problem lies.

The actual parsing and docgen generation is handled by the library react-docgen-typescript (https://github.com/styleguidist/react-docgen-typescript). It might be worth it to check their issues and see if something sounds like the issue you describe.

[StevenLangbroek]

Lol ok, found at least the hilarious root cause:

Doesn't work:

import React from 'react';

interface IProps {
  whatever?: string;
};

export default class MyComponent extends React.Component<IProps> {}

Works:

import React, { Component } from 'react';

export default class MyComponent extends Component<IProps> {}

[dhanson358]

Sure enough, @StevenLangbroek 's solution fixes it for me as well! How did you even think to try that haha?

[strothj]

I’m going to leave this issue open until I find some time to update the documentation.

Nice work!

Also will update the dependency to their project. I need to review their recent commits. There's a chance this has been fixed on their end.

[strothj]

I tested with an updated version of react-docgen-typescript. The issue is still present. I've documented the issue in the readme to hopefully save others some time.

[chengcyber]

for anyone run into this issue, my solution is to specify custom tsconfig for this loader

// webpack.config.js
      {
        loader: 'react-docgen-typescript-loader',
        options: {
          tsconfigPath:  path.resolve(__dirname, 'path/to/your/tsconfig.json')
        },
      },

// my tsconfig.json
{
  "compilerOptions": {
    "sourceMap": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "module": "esnext",
    "moduleResolution": "node",
    "target": "es6",
    "jsx": "preserve",
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "noResolve": false,
    "importHelpers": true,
    "lib": [
      "dom",
      "es5",
      "es6",
      "esnext"
    ]
  },
  "exclude": [
    "node_modules",
    "lib",
    "es"
  ]
}

Now, the loader can generate correctly for the syntax like React.Component<IProps, any>