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

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® Core™ 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

[SyedUmerHasan]

I am also confirming this issue exist, node_modules needs to be excluded from the build. Issue reproducible with Lerna monorepo.

[shilman]

It shouldn’t be processing node_modules at all… 🤔