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.

[rbuckton]

@cyrus-za is there a public project that reproduces this behavior? Have you tried a more recent version of TypeScript or create-react-app? I'm trying to assemble a repro for this issue, but do not have enough information. Aside from running create-react-app, adding @types/styled-components, and running yarn build, what else is needed to trigger this long build time or OOM exception?

[cyrus-za]

I haven't used CRA in over a year. Using NextJS, partly because of this exact issue

[Yashpk789987]

I am stuck because of this issue

[Yashpk789987]

Can anyone help me. I am using material ui with typescript cra and i am stuck because of this issue

[rbuckton]

@Yashpk789987 do you have an example repro? I still don't have enough information to accurately investigate this.

[RyanCavanaugh]

Closing due to no follow-up. It sounds like material-ui is the root cause here, which is tracked elsewhere.