Description
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.
- Windows 16GB RAM, WSL (Ubuntu Install)
- 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.
Activity
[-]yarn tsc && react-scripts build slow[/-][+]yarn tsc && react-scripts build v3 takes 1 hour to complete[/+][-]yarn tsc && react-scripts build v3 takes 1 hour to complete[/-][+]`yarn tsc && react-scripts build` v3 takes 1 hour to complete[/+]deftomat commentedon May 7, 2019
How long it took without TS? Both
start
andbuild
?How long it took to finish just
tsc
?deftomat commentedon May 7, 2019
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 commentedon May 7, 2019
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 commentedon May 7, 2019
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 commentedon May 7, 2019
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 commentedon May 7, 2019
Nope, working in subdirectory. Using this dockerfile.
jewseppi commentedon May 7, 2019
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 commentedon May 7, 2019
We already use
fork-ts-checker-webpack-plugin
in this project. It internally uses the TypeScript compiler to do the type checking.rajzik commentedon May 9, 2019
It looks like when there is
lazy loading
andcircular 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 commentedon May 16, 2019
I've resolved the issue however its hard to pinpoint the exact cause; seems there were multiple side effects happening.
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 commentedon May 17, 2019
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",
},
26 remaining items
christopher-francisco commentedon Jun 4, 2020
I have this problem, my project is fairly big so unless I add
NODE_OPTIONS=--max-old-space-size=4096
, it won't build, throwing OOM.When it builds, it takes about 21 minutes.
We've built it with an old manually configured webpack setup and it takes 5 mins, so I'm guessing it's related to Typescript
jamesg1 commentedon Jun 8, 2020
@lukas1994 I just tried the new snowpack typescript react template and it handles compilation of TS much faster leveraging ESM imports. It's backwards compatible with CRA and Typescript compatible out of the box, might be worth a try to help with your build performance issues. https://www.snowpack.dev/#what-is-snowpack%3F
deftomat commentedon Jun 9, 2020
@jamesg1 Does Snowpack work correctly with old CommonJS packages? Because if yes, then it sound like a way to go. At least for a development.
jamesg1 commentedon Jul 31, 2020
I've been using their webpack bundler recently and find it great. The config is much more flexible than CRA yet keeps the simplicity similar to CRA.
anit commentedon Aug 7, 2020
Our react application is in initial stages and at most we have added 5 components with libs like chakra-ui and styled-components
Solutions tried so far with respect to fork-ts-checker plugin, no difference in build time. Its still 1.5 hours:
TSC_WATCHFILE=UseFsEventsWithFallbackDynamicPolling react-app-rewired build
Alternatively I went right into node_modules and removed spliced fork-ts-checker from the plugins and the build was done in 10 seconds.
Digging more and found out that in
addToAffectedFilesPendingEmit
function it gets stuck on follow line:The problem is it always halts / pauses indefinitely (sort of) after processing few files.
anit commentedon Aug 7, 2020
My issue was resolved after I bumped my typescript version from 3.9.7 to 4.0.0-beta. Build time with 3.9.7 eventually got to 4 hours. And it failed after 4 hours of running, pointing to this error:
Expression produces a union type that is too complex to represent. TS2590
. After this I just thought of giving upgrade to beta a try and the build time is now 10 seconds.Yashpk789987 commentedon Oct 6, 2020
@anit my issue didn't resolved after switching to typescript 4.0.0-beta. I am stuck . what should i do ? can anyone help me ??
yulolimum commentedon Oct 17, 2020
For anyone looking for a workaround - @anit 's response helped me "solve" this issue with
"typescript": "3.9.7"
and"react-scripts": "3.0.1"
.Local builds went from over 10mins to 40 seconds.
Provided is a patch file to use with
patch-package
(remove the .txt extension).react-scripts+3.0.1.patch.txt
PraveenVerma17 commentedon Jan 6, 2021
I don't think react-scripts team help anymore. I am facing similar issue although i am not using typescript. My prod build takes more than 30 mins.
I am using react scripts 4.0.1
mankutila commentedon Feb 3, 2021
Is an issue for me too. Prod build takes 10 mins. How can I debug it at least?
PraveenVerma17 commentedon Feb 3, 2021
@mankutila My project still taking more than 30 mins during production build and this team is no useful at all.
if we have more dependencies build takes that much more time, i am not sure why can't react-scripts gives feature to disable eslint while building app. explicit eslint to my app files hardly takes 1 min but when it comes to prod build it takes lot of time to generate prod build.
LuMizera commentedon Feb 26, 2021
My build is also taking 30+ min, and i've tried a lot of things to improve and could not get a single second better
What i've tried: Changing imports from material-ui (which is heavy) removing some librarys and other things and none had any positive impact
jimyhdolores commentedon May 4, 2021
Lo mismo por acá :(
spantheslayer commentedon Jul 2, 2021
even specifying the max--old usafe for build does not effect the performance at all ,, is there any other solution ??
gkp1 commentedon Feb 14, 2023
Ubuntu 20.04 LTS, running on a VPS, 1GB RAM. Regular user, with sudo privileges.
Takes over an hour to build.
I am certain that having more RAM would make it faster, but it kind of makes no sense to take so long, because I have 2GB swap memory. Also, it would be GREAT if there was any progress bar or progress percentage indicator. Would be really really nice. Like, really. Show us where the loading is hanging...
I need to run this command before
npm run build
, or else it will always give me an error due to only having 1024MB RAM. Each argument fixes one error.export NODE_OPTIONS="--max-old-space-size=1024 --openssl-legacy-provider"
(if you're still having problems, search how to enable swap memory)
my dependencies: