Skip to content

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

Open
@jewseppi

Description

@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.

Activity

changed the title [-]yarn tsc && react-scripts build slow[/-] [+]yarn tsc && react-scripts build v3 takes 1 hour to complete[/+] on May 7, 2019
changed the title [-]yarn tsc && react-scripts build v3 takes 1 hour to complete[/-] [+]`yarn tsc && react-scripts build` v3 takes 1 hour to complete[/+] on May 7, 2019
deftomat

deftomat commented on May 7, 2019

@deftomat
Contributor

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

How long it took to finish just tsc ?

deftomat

deftomat commented on May 7, 2019

@deftomat
Contributor

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

johnnyreilly commented on May 7, 2019

@johnnyreilly
Contributor

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

rajzik commented on May 7, 2019

@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

johnnyreilly commented on May 7, 2019

@johnnyreilly
Contributor

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

rajzik commented on May 7, 2019

@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

jewseppi commented on May 7, 2019

@jewseppi
Author

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

ianschmitz commented on May 7, 2019

@ianschmitz
Contributor

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

rajzik

rajzik commented on May 9, 2019

@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

jewseppi commented on May 16, 2019

@jewseppi
Author

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

jewseppi commented on May 17, 2019

@jewseppi
Author

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

christopher-francisco commented on Jun 4, 2020

@christopher-francisco

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

jamesg1 commented on Jun 8, 2020

@jamesg1

@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

deftomat commented on Jun 9, 2020

@deftomat
Contributor

@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

jamesg1 commented on Jul 31, 2020

@jamesg1

@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.

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

anit commented on Aug 7, 2020

@anit

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:

  1. Setting async: true. Reduced cpu usage
  2. Changed the build script to 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:

        var existingKind = state.affectedFilesPendingEmitKind.get(affectedFilePendingEmit);

The problem is it always halts / pauses indefinitely (sort of) after processing few files.

anit

anit commented on Aug 7, 2020

@anit

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

Yashpk789987 commented on Oct 6, 2020

@Yashpk789987

@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

yulolimum commented on Oct 17, 2020

@yulolimum

Alternatively I went right into node_modules and removed spliced fork-ts-checker from the plugins and the build was done in 10 seconds.

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

PraveenVerma17 commented on Jan 6, 2021

@PraveenVerma17

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

mankutila commented on Feb 3, 2021

@mankutila

Is an issue for me too. Prod build takes 10 mins. How can I debug it at least?

PraveenVerma17

PraveenVerma17 commented on Feb 3, 2021

@PraveenVerma17

@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

LuMizera commented on Feb 26, 2021

@LuMizera

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

jimyhdolores commented on May 4, 2021

@jimyhdolores

Lo mismo por acá :(

spantheslayer

spantheslayer commented on Jul 2, 2021

@spantheslayer

even specifying the max--old usafe for build does not effect the performance at all ,, is there any other solution ??

gkp1

gkp1 commented on Feb 14, 2023

@gkp1

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:

  "dependencies": {
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.0.4",
    "@testing-library/user-event": "^12.1.7",
    "axios": "^0.21.1",
    "date-fns": "^2.16.1",
    "emoji-mart": "^3.0.1",
    "formik": "^2.2.0",
    "i18next": "^19.8.2",
    "i18next-browser-languagedetector": "^6.0.1",
    "markdown-to-jsx": "^7.1.0",
    "mic-recorder-to-mp3": "^2.2.2",
    "qrcode.react": "^1.0.0",
    "react": "^16.13.1",
    "react-color": "^2.19.3",
    "react-dom": "^16.13.1",
    "react-modal-image": "^2.5.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3",
    "react-toastify": "^6.0.9",
    "recharts": "^2.0.2",
    "socket.io-client": "^3.0.5",
    "use-sound": "^2.0.1",
    "yup": "^0.32.8"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {}
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @johnnyreilly@anit@yulolimum@cyrus-za@InvictusMB

        Issue actions

          `yarn tsc && react-scripts build` v3 takes 1 hour to complete · Issue #7003 · facebook/create-react-app