Storybook w/ Typescript takes ~2 minutes to load a story.

[MarkLyck]

Describe the bug
A clear and concise description of what the bug is.

The initial load of storybook takes about 2 minutes to load when using Typescript.
When not using Typescript it takes a few seconds.

Code changes also takes a very long time to reflect in the story.

My guess is that it doesn't exclude node_modules correctly.

To Reproduce
Steps to reproduce the behavior:

1. Set up storybook with typescript
2. run yarn start-storybook -s ./public -c .storybook -p 9001 --ci
3. Takes about 2 minutes before you can see a story, and code changes takes a long time to reflect.

Expected behavior
It should load about as fast as it does with pure JS.
It should not need to compile node_modules

Screenshots

Code snippets
If applicable, add code samples to help explain your problem.

webpack.config.js

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    exclude: /node_modules/,
    use: [
      {
        loader: require.resolve('awesome-typescript-loader'),
        options: {
          exclude: /node_modules/,
          presets: [['react-app', { flow: false, typescript: true }]],
          configFileName: './.storybook/tsconfig.json',
        },
      },
      {
        loader: require.resolve('react-docgen-typescript-loader'),
        options: {},
      },
    ],
  })

  config.resolve.extensions.push('.ts', '.tsx')
  config.resolve.plugins = [new TsconfigPathsPlugin()]
  return config
}

tsconfig.json

{
  "compilerOptions": {
    "outDir": "build/lib",
    "module": "commonjs",
    "strictNullChecks": true,
    "skipLibCheck": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "jsx": "react",
    "noUnusedParameters": true,
    "noUnusedLocals": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "declaration": true,
    "allowSyntheticDefaultImports": true,
    "emitDecoratorMetadata": true,
    "target": "es5",
    "lib": ["es5", "es6", "es7", "es2017", "dom"],
    "sourceMap": true,
    "types": ["react", "node"],
    "baseUrl": "../",
    "paths": {
      "~*": ["./src*"],
      "components": ["./src/components/*"],
      "ui-components": ["./src/ui-components/*"],
      "pages": ["./src/pages/*"],
      "common": ["src/common/*"],
      "mocks": ["./mocks/*"],
      "lib": ["./lib/*"]
    },
  },
  "include": ["src/**/*", "../src/typings.d.ts"],
  "exclude": [
    "node_modules",
    "build",
    "dist",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts",
    "**/*/*.test.ts",
    "examples"
  ]
}

As far as I can tell from any docs or similar problems, this should exclude node_modules correctly.

System:
System:
OS: macOS 10.15.4
CPU: (8) x64 Intel(R) Core(TM) i7-6920HQ CPU @ 2.90GHz
Binaries:
Node: 12.12.0 - /usr/local/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.14.4 - /usr/local/bin/npm
Browsers:
Chrome: 81.0.4044.138
Firefox: 70.0.1
Safari: 13.1
npmPackages:
@storybook/addon-a11y: ^5.3.18 => 5.3.18
@storybook/addon-actions: ^5.3.18 => 5.3.18
@storybook/addon-info: ^5.3.18 => 5.3.18
@storybook/addon-knobs: ^5.3.18 => 5.3.18
@storybook/addon-links: ^5.3.18 => 5.3.18
@storybook/addon-storysource: ^5.3.18 => 5.3.18
@storybook/addon-viewport: ^5.3.18 => 5.3.18
@storybook/react: ^5.3.18 => 5.3.18

[shilman]

Did you try the preset? https://storybook.js.org/docs/configurations/typescript-config/#typescript-configuration-presets

[MarkLyck]

@shilman

Thanks for the quick response. I tried with just the default preset and nothing else, and it's a little better.

It now takes ~1.5 minutes instead. of 2-3. minutes.

But looking at the logs it still spends the vast majority of the time compiling node_modules I don't use in my stories. The longest time is spent loading amcharts and ALL @ant-design/icons

Is there any way to exclude libraries I don't need to load in my storybook?

[shilman]

It shouldn't be processing node_modules at all... 🤔

[MarkLyck]

@shilman Glad to hear that it's not supposed to do that!

From the logs it looks like it's the type checking. Before it starts building node_modules it logs "Starting type checking service..."

After building all the node_modules it logs "No type errors found"

So looks like it's typescript building all this stuff? But my tsconfig (pasted above) have node_modules excluded as well 🤷‍♂️

[MarkLyck]

Even if I remove the .storybook/tsconfig.json it still builds my node_modules during type checking.

Although it might just be picking up the project level tsconfig.json instead

[shilman]

There is no .storybook/tsconfig.json AFAIK. We're upgrading Storybook's typescript support in the next few days, and I'll be sure to bring this into the discussion cc @mrmckeb

[MarkLyck]

@shilman

It's about half the loading time with the preset, so I'll take that as a win for now, and check back when the typescript support is updated to see if there's any updates :)

Thanks for the help!

[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!

[MarkLyck]

@shilman thanks for the update!

I updated to 6.0.0-beta.12 (& updated my configs to the new main.js & preview.js files).

I removed the typescript-preset mentioned earlier in this thread as there was an error it already existed.

However, it's still building all of my node_modules every time, and it still takes 1-2 minutes to load. (actually seems a bit slower now)

[shilman]

@MarkLyck the speed difference is probably due to react-docgen (fast-ish and default in the preset) vs react-docgen-loader (slow-ish and default in the new setup)

i don't understand why it's so slow. do you have a repro repo you can share?

[MarkLyck]

@shilman it's a private repo, but I'll invite you as a temporary collab so you can see it.

Or if needed I can try to create a dummy repo to reproduce, but not sure how long that will take.

The branch for storybook 6 is storybook6
Master branch has the @preset-typescript with storybook@5.3.18

https://github.com/MarkLyck/weeklystocktip/tree/storybook6

only setup needed is yarn install
and then yarn storybook to start storybook.

There is a custom webpack in there to load .less files for antd theming. But it takes just a long to load without it.

I can make a branch without this if that helps.