Importing types from a different file breaks docgen

[jeffcstock]

Describe the bug

When importing a type or interface from a different file, docgen won't display props correctly (or at all).

To Reproduce

1. Import an interface from a separate file. Use that in type declaration of component.

types/bootstrap.ts

export interface DropdownProps {
  /** Title to display in ActionSheet */
  action_sheet_title?: string

  /** URL to display alongside ActionSheet title */
  action_sheet_title_image?: string

  /** If this value matches an option's eventKey value, it will
   * render as selected
   */
  selectedKey?: string
}

Dropdown.tsx

import { DropdownProps } from 'types/bootstrap'

export const Dropdown: FC<DropdownProps> = (props) => {
  ...
}

Expected behavior

The Props block should display the corresponding Props.

Actual Behaviour

The props block doesn't display any props.

---

Fix

However, the props will show correctly if the interface is declared in the same file as the component.

Dropdown.tsx

export interface DropdownProps {
  /** Title to display in ActionSheet */
  action_sheet_title?: string

  /** URL to display alongside ActionSheet title */
  action_sheet_title_image?: string

  /** If this value matches an option's eventKey value, it will
   * render as selected
   */
  selectedKey?: string
}

export const Dropdown: FC<DropdownProps> = (props) => {
  ...
}

Results in:

Code snippets

System:

package.json

"react-docgen-typescript-loader": "^3.6.0",

Component is in TSX format.

Please paste the results of npx -p @storybook/cli@next sb info here.

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
  Binaries:
    Node: 8.11.3 - ~/.nvm/versions/node/v8.11.3/bin/node
    Yarn: 1.19.2 - /usr/local/bin/yarn
    npm: 6.12.1 - ~/.nvm/versions/node/v8.11.3/bin/npm
  Browsers:
    Chrome: 79.0.3945.88
    Safari: 13.0.4
  npmPackages:
    @storybook/addon-actions: ^5.2.5 => 5.2.5
    @storybook/addon-docs: ^5.2.5 => 5.2.5
    @storybook/addon-knobs: ^5.2.5 => 5.2.5
    @storybook/addon-links: ^5.2.5 => 5.2.5
    @storybook/addons: ^5.2.5 => 5.2.5
    @storybook/react: ^5.2.5 => 5.2.5

[denidiasjr]

Any news about this issue?

[strothj]

This loader unfortunately does not automatically locate your project's tsconfig.json file (would be a great enhancement if a pull request is made).

If its path isn't specified, the underlying library react-docgen-typescript will fallback to creating a new TypeScript project for each file (I believe), which unfortunately does not resolve types external to the file being checked.

I've updated the documentation and updated the example project to show its usage:

    use: [
      require.resolve("ts-loader"),
      {
        loader: require.resolve("react-docgen-typescript-loader"),
        options: {
          // Provide the path to your tsconfig.json so that your stories can
          // display types from outside each individual story.
          tsconfigPath: path.resolve(__dirname, "../tsconfig.json"),
        },
      },
    ],

[jeffcstock]

Thank you so much @strothj that is exactly the fix I needed. Thanks for updating the docs, i'm sure it will help others in my situation! 🎉