`yarn tsc && react-scripts build` v3 takes 1 hour to complete

[jewseppi]

Is this a bug report?

Yes,
The production build of a TypeScript project requires almost an hour to complete.

I have tried many different version combinations all with the same result; either my system crashes or I get a very slow build process.

yarn start takes about 5 min and my production build takes almost 1 hour; it's quite consistent.

Currently on the following versions.
"@types/styled-components": "4.1.10",
"react-scripts": "3.0.0",
"typescript": "3.3.4000",

Did you try recovering your dependencies?

I have deleted these files numerous times and tried a few of the typescript-dev versions as well as the styled-component types.

I am using Yarn
Version 1.15.2

Which terms did you search for in User Guide?

script react-scripts tsc build slow
typescript cra creating optimized production build takes an hour

Environment

Issues are consistent in both environments.

1. Windows 16GB RAM, WSL (Ubuntu Install)
2. IBM Cloud Docker Instance

npx: installed 91 in 18.872s

Environment Info:

System:
OS: Linux 4.4 Ubuntu 18.04.1 LTS (Bionic Beaver)
CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
Binaries:
Node: 11.11.0 - ~/.nvm/versions/node/v11.11.0/bin/node
Yarn: 1.15.2 - /usr/bin/yarn
npm: 6.7.0 - ~/.nvm/versions/node/v11.11.0/bin/npm
Browsers:
Chrome: Not Found
Firefox: Not Found
npmPackages:
react: Not Found
react-dom: Not Found
react-scripts: Not Found
npmGlobalPackages:
create-react-app: Not Found

Steps to Reproduce

This is a very large project with hundreds of components.

"start": react-scripts start", (5-6 min)
"build": "tsc && react-scripts build" (~53min),

I upgraded my existing installation to the newest version of React which supports Hooks and integrated TypeScript which caused the development server to slow down on first launch; with the console displaying the following.

Files successfully emitted, waiting for typecheck results...

When I commit and merge the code, a deployment build is spun up in a Docker instance which takes almost an hour to complete.

Expected Behavior

I would expect the production build to take no more than 10 min.
The development server should also launch a bit quicker.

[deftomat]

How long it took without TS? Both start and build?

How long it took to finish just tsc ?

[deftomat]

We had a similar issue as we are using custom create-react-app fork with enabled tslint. Looks like project grows to the size, where fork-ts-checker-webpack-plugin slows down really badly. We solve it by disabling tslint but you are using the default create-react-app which is not using tslint.

Maybe @johnnyreilly could help us with this as message "Files successfully emitted, waiting for typecheck results..." means that create-react-app is waiting for result from fork-ts-checker-webpack-plugin.

For your information, we are currently not listening to fork-ts-checker-service-out-of-memory event but as you mentioned that build actually finished, then I think it is not an issue.

[johnnyreilly]

I'd be interested to know how tsc alone performs and whether this is related to the regression in performance with TS 3.4. The ticket mentioned 3.3 so perhaps not.

I've never encountered a build that performs that badly before. I'm also curious that this script is first running tsc and then running react-scripts:
"build": "tsc && react-scripts build"

Can't guarantee I'll be able to help more than this but these are my quick observations

[rajzik]

I have same issue. Local build took about 1 minute avg. this was after node reinstallation (removed all cache and node js files).
But on docker it took 1000 second to build production package. It doesn't matter if CI is present or not.
I have tried multiple docker/node versions always the same result. Also I have tried to change versions of typescript and styled components with no effect or very small effect on build time.

[johnnyreilly]

Random thought: are you building in the root of your docker container? I've an idea that's problematic for reasons that escape me. Something was reported in ts-loader (I don't think it was ts-loader specific). Read details here: TypeStrong/ts-loader#758 (comment)

[rajzik]

Random thought: are you building in the root of your docker container? I've an idea that's problematic for reasons that escape me. Something was reported in ts-loader (I don't think it was ts-loader specific). Read details here: TypeStrong/ts-loader#758 (comment)

Nope, working in subdirectory. Using this dockerfile.

FROM node:11.9.0-stretch
FROM cypress/browsers:chrome67

RUN mkdir /var/build-folder
RUN npm install -g serve yarn

WORKDIR /var/build-folder/

COPY . .

RUN yarn

RUN yarn build

ENTRYPOINT ["/bin/sh", "-c", "./test.sh"]

[jewseppi]

running tsc doesn't seem to cause an issue (completes in ~ 1min)
I combined it with the build command hoping to see an improvement.

I also tried with typescript 3.4.1 and 3.4.5 all with the same issue.

I found some posts suggesting I eject and use Fork TS Checker Webpack plugin, but I would much rather be stuck with hour long deployments than an ejected CRA.

[ianschmitz]

We already use fork-ts-checker-webpack-plugin in this project. It internally uses the TypeScript compiler to do the type checking.

[rajzik]

It looks like when there is lazy loading and circular dependency it will take a long time in production mode on docker/node. I think this is another issue that I have.
EDIT: On local machine it runs around 1 minute I have tried it on mac, PC, linux(ubuntu). But when running in docker container, time is always ~16 minutes average (1000s).

[jewseppi]

I've resolved the issue however its hard to pinpoint the exact cause; seems there were multiple side effects happening.

"@date-io/core": "^1.2.0",
"@date-io/date-fns": "^1.3.5",
"@material-ui/core": "^1.5.1",
"@material-ui/icons": "^2.0.3",
"date-fns": "^2.0.0-alpha.27",
"material-ui": "^0.20.2",
"material-ui-pickers": "1.0.0-rc.14",
"styled-components": "^4.2.0",
"typescript": "3.5.0-dev.20190512",

material-ui/material-ui-pickers is deprecated for @material-ui & @material-ui/pickers however there seems to be a conflict with @material-ui/core and style themes don't render properly when using withStyles(); unfortunately I'm stuck with a project that heavily uses these HOC's.

I also added a condition to the tsconfig.json to exclude all .js & .jsx files in my project which could have been part of the reason build times were taking an hour.

{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"strict": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noImplicitAny": true,
"noEmit": true,
"jsx": "preserve"
},
"include": ["src"],
"exclude": ["src//*.js", "src//*.jsx"]
}

There is still the issue of my CPU ( i7 ) running at 100%, node consumes all available resources; when I close apps node increases it's consumption.

There is clearly a leak and I'm wondering if it's package related or a hardware failure.

My cloud deployments are down to 3min now :)

[jewseppi]

Finally resolved the CPU issue but now seems to have slowed down the typechecking, getting the message "Files successfully emitted, waiting for typecheck results..." in my terminal.

Docker build times are back up to ~50min

@types/styled-components is a conflicting package (newer versions break the docker build)
date-fns has a format issue, using moment to get around this.

"dependencies": {
"@date-io/core": "^1.2.0",
"@date-io/date-fns": "^1.3.5",
"date-fns": "^2.0.0-alpha.27",
"material-ui": "^0.20.2",
"material-ui-pickers": "1.0.0-rc.14",
"moment": "^2.24.0",
"styled-components": "^4.2.0",
"typescript": "3.3.4000",
},
"devDependencies": {
"@types/node": "^12.0.2",
"@types/styled-components": "4.0.3",
},