Create-react-app: TypeScript: Slow compilation time

[td0m]

Now that create-react-app now natively supports typescript, I gave it a try. I expected near instant compilation times after making a change to a file, just like with JavaScript. Instead, I got about 3-5s of delay on the official typescript cra (out of the box). I thought this delay would disappear after moving to babel 7, I thought we simply strip off TypeScript when running the dev server and properly compile TypeScript and check for errors when building the production build? Is this possible?

[td0m]

As we are already using babel 7, it's not the babel-loader that is slowing down the build times. In the react-scripts webpack config, if you delete the ForkTsCheckerWebpackPlugin, the build times drastically drop meaning that this is what causes our slow build times.

I'm sure many users would prefer near instant re-compilation times and have the option to disable ForkTsCheckerWebpackPlugin, as they already have great linting & type checking in their editor, such as in VsCode, and optionally support checking types with e.g npm run check-types which would simply run tsc and display any type errors. This conventions has been well shown in this article about typescript with babel 7. Currently the only way of doing this, is running npm run eject, can we add some option to enable/disable the type checker? Thank you 👍🏻.

[ianschmitz]

Enabling async on ForkTsCheckerWebpackPlugin usually drastically improves the re-compilation times in my experience.

You can see our previous discussions on this during the original TypeScript PR a while back, where we had issues enabling async in CRA over at #4837, and it wasn't feasible to include at the time. I think we would all love to see this enabled, but we would have to solve the issues mentioned in that thread.

Some notable comments:
https://github.com/facebook/create-react-app/pull/4837#issuecomment-425283779
https://github.com/facebook/create-react-app/pull/4837#issuecomment-425335691

[td0m]

@ianschmitz Changing the ForkTsCheckerWebpackPlugin config async to true and silent to false seems to fix both the issues you stated above. Errors are perfectly displayed.
.

Obviously, because async is enabled and the ts checking takes more than the babel process, the errors are displayed with a delay.

[Bnaya]

IMO disabling type checking by default, or adding ability to opt out, makes a-lot of sense

[deftomat]

Slow TS recompilation is a big pain in CRA projects. I'm hoping that this could help https://github.com/facebook/create-react-app/pull/5903

[hlthi]

5959

Rebuild Time( skipLibCheck: false) : 5.20
Current Rebuild Time(skipLibCheck: true) : 0.4 seconds
Ratio : 13

[shavyg2]

how are people working around this issue? I normally do everything i can to avoid ejecting but this is unbearable?

[hlthi]

how are people working around this issue? I normally do everything i can to avoid ejecting but this is unbearable?

Just change tsconfig.json , "skipLibCheck" : true

[insidewhy]

@hlthi skipLibCheck improves the situation somewhat but it's still not adequate IMO. It's a shame that async is disabled just due to the terminal clearing. I specifically disable the screen clearing (via CI=true) as I find it irritating. Now it's doubly irritating haha ;)

[insidewhy]

Created a PR with a fix: https://github.com/facebook/create-react-app/pull/6209
With this change you can simply use CI environment variable to have your type checker run asynchronously, at the cost of create-react-app not clearing your terminal.