Storybook: 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 [email protected]

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.

[shilman]

Thanks @MarkLyck i've cloned the repo and will delete it when I'm done with this. Feel free to remove me as a collaborator.

I played with the settings in .storybook/main.js like this:

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

Values on my machine:

• false: 28s
• 'react-docgen': 29s
• 'react-docgen-typescript': 59s

For now, I think switching the default is about as good as it's going to get. We'll do a performance release later this year where we should be able to get this number down a lot. Next.js will be releasing their own preset soon, and perhaps they can also provide some Next.js-specific optimizations.

[MarkLyck]

@shilman Thank you!

Can confirm with react-docgen I'm also seeing 29s for manager, 1.15min for preview 😄

much better build times. But I'm guessing with this method I won't get the TypeScript types for automated documentation? something I was hoping to implement when @6 is stable.

So it is next.js that's causing the slow storybook build times?

P.S. looking forward to the performance release later this year! You guys are doing an awesome job thank you so much for working on this tool!

EDIT also made it slightly faster by removing all icons from @ant-design/icons and only just FontAwesome icons in my project. (something I wanted to do anyway). Now it's down to 20-25 seconds for the manager and 40-45 seconds for the preview.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

If you switched from react-docgen-typescript to react-docgen after reading this issue, please consider switching back. react-docgen-typescript support is better and we just got a big performance improvement here: https://github.com/storybookjs/storybook/pull/11106

Here are the numbers I'm seeing for official-storybook on my dev machine:

• react-docgen: 17 s for manager and 21 s for preview
• react-docgen-typescript (before): 36 s for manager and 46 s for preview
• react-docgen-typescript (after): 15 s for manager and 31 s for preview

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[lacolaco]

I'm in the same situation with @storybook/angular 6.0.0-rc.12. It takes 2-3 minutes for responding the first HTML. build-storybook is not slow.

[shilman]

@lacolaco i suspect that's due to a perf bug in 6.0 and not typescript related https://github.com/storybookjs/storybook/issues/11618

[lacolaco]

@shilman Thanks. I'll subscribe that issue.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[RushikeshJoshi4]

@MarkLyck Hey. I'm stuck on a similar issue. Did you find any solution? I got rid of react-docgen and withInfo decorator but it still, for some reason, builds node_modules.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

@RushikeshJoshi4 Do you have a repro repo you can share?

[RushikeshJoshi4]

Hi @shilman Actually this was posted during my summer internship. Now, the internship had ended, and it won't be possible for me to recreate minimum repository that has this problem. I think now the new Storybook updates probably cover it already.

[Obiwarn]

Same problem here: It builds node modules for ages.

[shilman]

@Obiwarn sounds like a configuration problem. do you have a repro you can share?

[simonepizzamiglio]

@shilman I also have the same problem, storybook builds node modules folder, here's my main.js file:

const path = require('path');

module.exports = {
  stories: ['../src/**/*.stories.@(js|tsx|md|mdx)', '../src/**/stories.@(js|tsx|md|mdx)'],
  test: /\.(ts|tsx)$/,
  typescript: {
    check: true,
    reactDocgen: 'react-docgen-typescript',
  },
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-knobs',
    '@storybook/addon-links',
    '@storybook/addon-viewport',
    '@storybook/addon-docs',
    '@storybook/preset-create-react-app',
  ],
  exclude: [/node_modules/, '/src/**/*/*.test.ts', '/src/**/*/*.test.tsx'],
  webpackFinal: async config => {
    config.resolve.modules = [path.resolve(__dirname, '../src/'), 'node_modules'];

    return config;
  },
};

[shilman]

Cc @mrmckeb

[Obiwarn]

@shilman
This happens to me with a blank project.
I create a new project with CRA and run sb init:

npx create-react-app my-app
cd my-app
npx sb init

On npm run storyboard it builds many node_modules.

Regular build is 19s and debug build in Webstorm over 3 min!

│ Storybook 6.0.28 started │ │ 19 s for manager and 18 s for preview │

Debug:

│ Storybook 6.0.28 started │ │ 3.63 min for manager and 3.67 min for preview │

[shilman]

@Obiwarn

Debug means running it in the webstorm debugger?

The first numbers look "normal". We're optimizing away the manager build entirely in 6.1-beta (available with npx sb@next init for new projects, npx sb@next upgrade --prerelease for an upgrade), and incrementally optimizing the preview over the next few releases.

The second set of numbers look crazy. I guess I'd recommend not running it in debug mode?

[Obiwarn]

@shilman

Debug mode is to go through the code step by step with the debugger. It is a blessing. We use it a lot.

So the compilation of the node_modules is intentional?

[simonepizzamiglio]

@shilman
This happens to me with a blank project.
I create a new project with CRA and run sb init:

npx create-react-app my-app
cd my-app
npx sb init

On npm run storyboard it builds many node_modules.

Regular build is 19s and debug build in Webstorm over 3 min!

│ Storybook 6.0.28 started │ │ 19 s for manager and 18 s for preview │

Debug:

│ Storybook 6.0.28 started │ │ 3.63 min for manager and 3.67 min for preview │

Same here, running

npx create-react-app my-app
cd my-app
npx sb init
npm run storybook

takes 20 s for manager and 21 s for preview and builds the node_modules folder.

I mean it's a reasonable time, what looks weird to me is that the build goes through the node_modules folder.

[pachuka]

Another thing to check (a co-worker ran into this issue) is try running storybook in "quiet" mode, this reduces the amount of text it prints to the terminal. Co-worker had multi-minute builds, and after using quiet mode it matched my build times of < 1min.

npx start-storybook --quiet