Storybook: info addon: TypeScript/React PropTypes: "No propTypes defined!"

[mweibel]

When using TypeScript, React, and styled components the info addon doesn't seem to be able to show propTypes for the components.

To Reproduce
A minimal reproducing example is found here:

https://github.com/mweibel/storybook-typescript-example

You can start storybook with npm start.

Expected behavior
Available propTypes are being shown.

Screenshots

System:

• OS: macOS
• Device: MacBook Prop
• Browser: Firefox
• Framework: react
• Addons: actions, info, knobs
• Version: 4.1.3 but also happens with 4.0.12 (and possibly lower, didn't check those)

[leroykorterink]

The properties table is created in makeTableComponent.js:80, this function is trying to get the proptype definition from type.propTypes or type.__docgenInfo.

You're usually not setting static propTypes properties on your React component when you're also using typescript. This means that you should use a documentation generator to create the type.__docgenInfo property for your components.

You're using a different documentation generator in your webpack.config.js than the one used in the typescript configuration example. Try using the documentation generator from the example, that one works fine for me.

[mweibel]

You're right! Using the docgen typescript loader instead of the plugin solved the issue for me.

FTR:

diff --git a/config/storybook/webpack.config.js b/config/storybook/webpack.config.js
index 7b09508..f048270 100644
--- a/config/storybook/webpack.config.js
+++ b/config/storybook/webpack.config.js
@@ -1,5 +1,4 @@
 const path = require("path");
-const TSDocgenPlugin = require("react-docgen-typescript-webpack-plugin");

 module.exports = (baseConfig, env, config) => {
   config.module.rules.push({
@@ -7,10 +6,12 @@ module.exports = (baseConfig, env, config) => {
     use: [
       {
         loader: "ts-loader"
+      },
+      {
+        loader: "react-docgen-typescript-loader"
       }
     ]
   });
-  config.plugins.push(new TSDocgenPlugin());
   config.resolve.extensions.push(".ts", ".tsx");
   return config;
 };

Thanks!

[adyz]

Also, if you are using React with Typescript and use this:

export default class MyComponent {}

instead of:

class MyComponent {}
export default MyComponent

it will not show the prop types