CRA build slow when using typescript

[cyrus-za]

TypeScript Version: 3.6.0-dev.20190703

Search Terms:

• create react app
• CRA
• react-scripts build
• slow build
• build takes long
• memory leak
• fork-ts-checker-webpack-plugin

Code

To reproduce simply create a new react app with CRA cli using --typescript flag and try react-scripts build inside a docker container.

• Using allowJS as 90% of the codebase is still JS (busy converting them to TS over time)
• Using Docker to build by running yarn build which runs react-scripts build
• Using CRA 3.0.1
• Not using Material-UI like some others with similar problems (see linked issues below)
• Using @types/styled-components (saw some people listing that in other issues)

Expected behavior:

Build should finish within 1 minute

Actual behavior:

When building on local machine in docker container it takes 10+ minutes. When building on codeship pro (limited cpu and memory) it throws the below error:

[75:0x557242a324a0]   184160 ms: Scavenge 1320.8 (1423.4) -> 1320.7 (1425.9) MB, 8.0 / 0.0 ms  (average mu = 0.141, current mu = 0.023) allocation failure 
[75:0x557242a324a0]   185706 ms: Mark-sweep 1322.2 (1425.9) -> 1321.9 (1425.9) MB, 1542.8 / 0.0 ms  (average mu = 0.078, current mu = 0.010) allocation failure scavenge might not succeed


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0x230c81fcfc5d]
Security context: 0x345bd9b9d9d1 <JSObject>
    1: addMappingWithCode [0x1c80bd5b1ea9] [/setup/node_modules/source-map/lib/source-node.js:~150] [pc=0x230c841be920](this=0x0aa6b18845e9 <JSGlobal Object>,0x0c8f02414fc9 <Object map = 0x1b1135485091>,0x2c1e1fc6ad81 <String[1]: [>)
    2: /* anonymous */ [0x3507c921ea11] [/setup/node_modules/source-map/lib/source-node.js:~86] [pc=0x230c841bf2eb](this=0x0c0...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

Writing Node.js report to file: report.20190703.084821.75.0.001.json
Node.js report completed
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

AS you can see, it has a memory leak and the package responsible for it is the source-map plugin. Create React App uses fork-ts-checker-webpack-plugin for type checking and babel 7 for building. The issue is with the type checking.

Related Issues:

• yarn tsc && react-scripts build v3 takes 1 hour to complete facebook/create-react-app#7003
• 3.4.1 tsc works 20! times slower than 3.3.4 #30663

[cyrus-za]

@weswigham, as requested, here's a new issue. This is with typescript@next version.