Performance issue with Storybook 5, babel-loader and TypeScript

[1-Felix]

Hey, I'm currently running into performance issues when I try to display a props table in storybook 5.

Current Behavior

Starting Storybook takes currently around 180 seconds for 35 components. By simply leaving out react-docgen-typescript-loader, build time goes down to 40 seconds.

Context

The project is build using react and typescript. But instead of the awesome-typecript-loader (like suggested in the storybook-docs) I'm using the babel-loader.

I'm using react-docgen-typescript-loader in order to display the props in the newly released docs-addon from storybook.

My custom webpack.config.js looks like this:

const path = require('path')

module.exports = ({ config, mode, defaultConfig }) => {
  config.module.rules.push(
    {
      test: /\.(ts|tsx)$/,
      exclude: path.resolve(__dirname, '../node_modules/'),
      use: [
        {
          loader: 'babel-loader',
        },
        {
           // commenting this out, improves performance significantly 
           loader: 'react-docgen-typescript-loader',
        },
      ],
    },
    {
      test: /\.stories\.(ts|tsx)$/,
      exclude: path.resolve(__dirname, '../node_modules/'),
      use: [
        {
          // needed for storysource-addon
          loader: require.resolve('@storybook/addon-storysource/loader'),
          options: { parser: 'typescript' },
        },
        {
          // needed for docs addon
          loader: '@storybook/source-loader',
          options: { injectParameters: true },
        },
      ],
    },
  )
  config.resolve.extensions.push('.ts', '.tsx')
  return config
}

What I tried

• Replacing babel-loader with ts-loader or awesome-typecript-loader
• Providing an explicit tsconfig.json for the react-docgen-typescript-loader (see this issue)
• Running babel-loader with the query: { compact: true } option.
• Using the TypeScript-Preset from Storybook instead of a custom webpack-config.

The listed attempts didn't improve build time or made it worse.

Specs

• Operating System: Windows 10
• Framework: React 16.8, Create-react-app 3.0.1
• Typescript 3.5.1
• Storybook 5.2.0-alpha.35

If you need any additional information, please let me know.

[swyxio]

a repro would be nice. can you take the exact same storybook setup and webpack config and put in in a small repo with just 1 component?

[gilbarbara]

Adding transpileOnly: true to @storybook/preset-typescript options helped a lot.

  {
    name: '@storybook/preset-typescript',
    options: {
      tsLoaderOptions: {
        transpileOnly: true,
      },
    },
  }

[dgreene1]

@felixkeller98 I'd be interested to see the final config that you settled on. Can you share yours?

From what I've seen, TypeScript and the Docs addon are not yet quite plug-in-play.