Webpack5: Typescript argTypes not auto-generated

Describe the bug It seems that typescript typings for react components do not get picked up correctly when using Storybook 6.2 beta

To Reproduce See attached snippets

Expected behavior Storybook should pick up the typescript typings (enums, …) correctly and not show No inputs found for this component.

Screenshots

Code snippets Sample component

import Icon from "../Icon"
import React, { useState } from "react"
import TextSkeleton from "../TextSkeleton"
import * as styles from "./accordion.module.scss"
import { IElementProps } from "../typings/props"
import { tabFocusEnter } from "../utilities/tabFocusEnter"

const Accordion: React.FC = ({ children }) => {
  return <div className={styles.accordion}>{children}</div>
}

interface IAccordionItemProps extends IElementProps {
  /** Title of the accordion tab */
  title?: string;
  /** Whether or not the accordion tab should be open by default */
  defaultOpen?: boolean;
}

const AccordionItem: React.FC<IAccordionItemProps> = ({ children, defaultOpen = false, title = "Dropdown", skeleton = false, disabled = false }) => {
  const [isOpen, setIsOpen] = useState(defaultOpen || false)

  console.log(styles)

  const toggle = () => {
    setIsOpen(!isOpen)
  }

  return <div
    className={[
      styles.accordionItem,
      styles[
      "accordionItem_state_" + (isOpen ? "open" : "closed")
      ],
      styles[
      "accordionItem_ui_" +
      (disabled ? "disabled" : "enabled")
      ]
    ].join(" ")}
  >
    <div
      onClick={toggle}
      tabIndex={disabled ? undefined : 0}
      onKeyDown={tabFocusEnter(toggle)}
      role="button"
      className={styles.accordionItemTitle}
    >
      <span
        className={[
          styles.accordionItemTitleIcon,
          styles.accordionItemTitleChild
        ].join(" ")}
      >
        <Icon name="Chevron down" size="16" />
      </span>
      <span
        className={[
          styles.accordionItemTitleText,
          styles.accordionItemTitleChild
        ].join(" ")}
      >
        {skeleton ? (
          <TextSkeleton />
        ) : (
          title
        )}
      </span>
    </div>
    <div className={styles.accordionItemContent}>
      {skeleton ? (
        <TextSkeleton lines={5} />
      ) : (
        children
      )}
    </div>
  </div>
}

export { Accordion, AccordionItem }

External typings

import React from "react"

interface IElementProps extends React.HTMLAttributes<Element> {
    /** Whether or not to display a skeleton instead of the accordion contents */
    skeleton?: boolean;
    /** Whether or not the component should be disabled */
    disabled?: boolean;
}

Storybook main config

const sassJson = require('node-sass-json-functions')

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const cssLoaderRule = {
  loader: 'css-loader',
  options: {
    sourceMap: true,
    modules: {
      namedExport: true,
      localIdentName: "[name]--[local]--[hash:base64:5]",
      exportLocalsConvention: "dashesOnly",
      exportOnlyLocals: false
    }
  }
}

const postCssLoaderRule = {
  loader: 'postcss-loader',
  options: {
    execute: false,
    sourceMap: true
  }
}

const sassLoaderRule = {
  "loader": 'sass-loader',
  "options": {
    "sassOptions": {
      "functions": {
        ...sassJson
      },
      "file": null,
      "data": null,
      "includePaths": [],
      "indentedSyntax": false,
      "indentType": "space",
      "indentWidth": 2,
      "linefeed": "lf",
      "omitSourceMapUrl": false,
      "outFile": null,
      "precision": 5,
      "sourceComments": false,
      "sourceMapContents": false,
      "sourceMapEmbed": false
    }
  }
}

const sassRule = {
  test: /\.s(a|c)ss$/,
  use: [
    MiniCssExtractPlugin.loader,
    cssLoaderRule,
    postCssLoaderRule,
    sassLoaderRule
  ]
}

const sassRuleModules = {
  test: /\.module\.s(a|c)ss$/,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        modules: {
          namedExport: true
        }
      }
    },
    cssLoaderRule,
    postCssLoaderRule,
    sassLoaderRule
  ]
}

const rules = {
  oneOf: [
    sassRuleModules,
    sassRule
  ]
}

module.exports = {
  "stories": [
    "../src/**/*stories.mdx",
    "../src/**/*stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-essentials",
    "@storybook/addon-a11y",
    "@storybook/addon-links",
    "@etchteam/storybook-addon-status/register"
  ],
  typescript: {
    reactDocgen: 'react-docgen-typescript'
  },
  webpackFinal: async (config) => {
    config.plugins.push(new MiniCssExtractPlugin())
    config.module.rules.push(rules)

    config.resolve.fallback = {
      ...config.resolve.fallback
    }

    return config
  },
  core: {
    builder: 'webpack5',
  }
}

System

Environment Info:

  System:
    OS: Windows 10 10.0.19041
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    Node: 12.3.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.9 - ~\AppData\Roaming\npm\npm.CMD
  Browsers:
    Chrome: 88.0.4324.190
    Edge: Spartan (44.19041.423.0), Chromium (88.0.705.81)
  npmPackages:
    @storybook/addon-actions: ^6.2.0-beta.6 => 6.2.0-beta.6
    @storybook/addon-essentials: ^6.2.0-beta.6 => 6.2.0-beta.6
    @storybook/addon-links: ^6.2.0-beta.6 => 6.2.0-beta.6
    @storybook/builder-webpack5: ^6.2.0-beta.6 => 6.2.0-beta.6
    @storybook/react: ^6.2.0-beta.6 => 6.2.0-beta.6
    @storybook/theming: ^6.2.0-beta.6 => 6.2.0-beta.6

Additional context We have in the same project a Gatsby 3 instance using the components that are shown in Storybook, hence our switch to Sb^6.2 to switch the whole codebase to Webpack 5.

It seems that some typings are getting picked up, but not correctly as shown in the screenshot below where cardRatio is an enum and shown as a text field.

Thanks a lot for your help & time

┆Issue is synchronized with this Asana task by Unito

[petr001]

I’ve found it - it’s because of this bug: https://github.com/styleguidist/react-docgen-typescript/issues/323

[oreqizer]

Any workaround on this guys?

just by also exporting a named component, and using that in stories

// Export named for Storybook
// 👉 https://github.com/storybookjs/storybook/issues/14118
export function Component () {
  // ...
}

export default Component;

then in your story:

import { Component } from "components/Component";