Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Progressively Slowed Builds with react-docgen-typescript

See original GitHub issue

Describe the bug

The documentation for Typescript offers TSDocgen as an option for parsing and providing props tables for stories. In my recent experience, and as noted in an recent issue in react-docgen-typescript, each tsx story is individually parsed and visibly pauses the Storybook build. With each TS story that is added, the build gets slower and slower. With only 10 stories, our build time is ~1.5 minutes… HMR is also impaired.

To Reproduce

Steps to reproduce the behavior:

Enable react-docgen-typescript-loader for .tsx? files, as recommended.
Enable the TSDocgenPlugin, as recommended.
Have a repo with 10+ stories.
See slow build time.

Screen Shot 2019-04-04 at 8 25 44 PM

Commenting out both 1 and 2 in our setup results in ~4s builds:

Screen Shot 2019-04-04 at 8 33 41 PM

Screenshots

Apr-04-2019 20-24-22 Code snippets

You can view our current Storybook config here on Github. I’m currently working on a PR to reduce our payload sizes with a DLL, so this config will change in the coming days/

System:

OS: MacOS
Device: Macbook Pro 13", latest
Browser: Chrome
Framework: React
Version: 5.0.5

Additional context I’ve been discussing this in the Discord channel, under support. It was suggested I log this bug.

Issue Analytics

State:
Created 4 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

8reactions

strothjcommented, Apr 5, 2019

The documentation needs to be updated to reflect that react-docgen-typescript-webpack-plugin should be replaced with react-docgen-typescript-loader. The Webpack plugin was the initial implementation which was later replaced with a loader.

https://github.com/strothj/react-docgen-typescript-loader/pull/40 was just merged in and published as v3.1.0 which should improve the performance. We were creating a TypeScript program instance for each parsed file. The pull request changes this to reuse the same instance.

Can you report what performance you’re getting with only the loader installed and with the new version?

2reactions

strothjcommented, Apr 5, 2019

Credit where it’s due. @denieler submitted the pull request which fixed that. 😃

Top Results From Across the Web

Fixing slow TypeScript builds in React | by Dominik Tarnowski

In my recent article, I said that TypeScript has very slow compilation builds compared to pure JavaScript, especially with create-react-app .

Top 5 react-docgen-typescript Code Examples - Snyk

To help you get started, we've selected a few react-docgen-typescript examples, based on popular ways it is used in public projects.

4 Ways to Document a React Component Library

react -docgen is a CLI and toolbox to help extracting information from React components, ... How to build a modular React with TypeScript...

React Styleguidist starting slooooooow - Stack Overflow

I tried many things to speed it up but nothing seems to make any difference. I tried: this workaround for react-docgen-typescript with no ......

Gatsby Changelog | 5.3.0

Please note: The TypeScript variants of gatsby-config and gatsby-node do not support ... fix(react-docgen): run user handlers before default ones PR #34286 ...