Addon docs fails to render prop table correctly when type is imported from a .tsx file (.ts works as expected)

[sami616]

Works 👍 (table shows both other and foo props)

// Bar.ts
export type BarProps = {
  foo?: string
}

// Other.tsx

import { BarProps } from './Bar'

type OtherProps = BarProps & {
 other?: number
}

const Other = (props: OtherProps) => <span {...props}>Other</span>

---

Doesnt work 👎🏼 (table doesnt render at all)

// Bar.tsx
export type BarProps = {
  foo?: string
}

// Other.tsx

import { BarProps } from './Bar'

type OtherProps = BarProps & {
 other?: number
}

const Other = (props: OtherProps) => <span {...props}>Other</span>

---

Doesnt work 👎🏼 (table renders, but shows foo as type any)

// Bar.tsx
export type BarProps = {
  foo?: string
}

// Other.tsx

import { BarProps } from './Bar'

type OtherProps = Pick<BarProps, 'foo'> & {
 other?: number
}

const Other = (props: OtherProps) => <span {...props}>Other</span>

[sami616]

ps - this is a contrived example, you might wonder why i dont just change Bar.tsx to Bar.ts, reason being - in my real app i have a component declared in it too

[shilman]

What's your setup? Is this a webpack configuration issue?

[sami616]

Hi @shilman this is my setup:

This is a react setup (without CRA)

main.js

module.exports = {
  stories: ['./Intro.stories.mdx', '../src/**/*.stories.tsx'],
  addons: [
    '@storybook/addon-knobs/register',
    'storybook-addon-styled-component-theme/dist/register',
    '@storybook/addon-actions/register',
    '@storybook/addon-a11y/register',
    {
      name: '@storybook/preset-typescript',
      options: {
        tsLoaderOptions: {
          transpileOnly: true,
          configFile: 'tsconfig-sb.json',
        },
      },
    },
    {
      name: '@storybook/addon-docs/react/preset',
    },
  ],
}

and my tsconfig-sb.json is as follows:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "noImplicitAny": true,
    "noUnusedLocals": true,
    "moduleResolution": "node",
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*", "typings/**/*"],
  "exclude": ["node_modules"]
}

[sami616]

One thing that might be worth noting is that all my storybook deps are updated to latest versions, apart from @storybook/preset-typescript updating this to 1.2.0 broke my build so have downgraded to 1.1.0

[shilman]

And I'm assuming that you've tried making both Other.tsx's identical, just to remove that variable and insure that it's entirely due to the file suffix?

[sami616]

Not sure I follow? Examples 1 and 2 are identical apart from the file extension for Bar changing

[shilman]

Ah sorry, was looking at Examples 1 and 3 due to "scrolling error" on my laptop screen 😂

[shilman]

Repro: 82ee3a3

[shilman]

@sami616 can you try the recommended 6.0 setup (should work in 5.3 too):

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-prop-tables-with-typescript

i don't expect it to fix the problem, but i believe this corresponds to reactjs/react-docgen#33 which has an open PR. upvoting on the issue/PR might help move things along

[sami616]

@shilman i've updated all my deps, presumably i still need @storybook/preset-typescript installed and referenced in my main.js ? Are there wip docs anywhere i can see?

[shilman]

We've just released zero-config typescript support in 6.0-beta. Please upgrade and test it!

• Release 6.0.0-beta.12+
• Migration instructions
• Updated docs

Thanks for your help and support getting this stable for release!

[kruthivijay31]

@sami616 check this issue #10842, I am using .tsx and it works! I hope this helps.

[ghost]

@shilman Have we got any progress on this issue? I have a similar issue, but it is not unique to .tsx files - it happens for both .ts and .tsx files.

Code Example

/* ------------- types.ts ------------- */

export type SomeFn = () => number;

export interface AnObject {
  isObject: boolean;
}

/* ------------- Component.tsx ------------- */

import { AnObject, SomeFn } from './types';

interface ComponentProps {
  /**
   * Annotation
   */
  onMainInterface: boolean;
  /**
   * Annotation
   */
  externalFn: SomeFn;
  /**
   * Annotation
   */
  externalObj: AnObject;
}

const Component: FC<ComponentProps> = () => {
  return <div>Hello mate</div>;
};

export default Component;

/* ------------- Component.stories.mdx ------------- */

import { Meta, ArgsTable } from '@storybook/addon-docs/blocks';
import Component from './Component'

<Meta title="Component" />

<ArgsTable of={Component} />

Result

Package info

package	version
@storybook/cli	6.1.2
@storybook/react	6.1.2
@storybook/addon-docs	6.1.2

.storybook/main.js

module.exports = {
  stories: ['../src/**/*.stories.@(js|ts|md)x'],

  typescript: {
    reactDocgen: 'react-docgen-typescript',
  },

  addons: [
    '@storybook/addon-docs',

    // ... other addons
  ],

 // ... other suff
};

While this is clearly acknowledged as a pitfall of using react-docgen it hasn't been mentioned as a bug that applies to react-docgen-typescript.

[ghost]

After some digging I found out what the issue was. I'm using a babel-plugin to generate PropTypes from TS declarations. But it seems that react-docgen-typescript prioritises PropTypes over TS definitions (#12821).