[Bug] CircleCI + Terser Error: Call retries were exceeded

[amcdnl]

Bug

When you use CircleCI to build the project, it will sometimes not compile throwing the error below.

Looks like this is a known problem here: webpack-contrib/terser-webpack-plugin#143 (comment). Recommend setting the webpack configuration based on the feedback.

#!/bin/bash -eo pipefail
yarn build
yarn run v1.21.1
$ react-scripts build
Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`
Failed to compile.

Failed to minify the bundle. Error: static/js/1.dc6042b5.chunk.js from Terser
Error: Call retries were exceeded
    at /home/circleci/project/node_modules/react-scripts/scripts/build.js:196:23
    at finalCallback (/home/circleci/project/node_modules/webpack/lib/Compiler.js:257:39)
    at /home/circleci/project/node_modules/webpack/lib/Compiler.js:273:13
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/circleci/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:22:1)
    at AsyncSeriesHook.lazyCompileHook (/home/circleci/project/node_modules/tapable/lib/Hook.js:154:20)
    at onCompiled (/home/circleci/project/node_modules/webpack/lib/Compiler.js:271:21)
    at /home/circleci/project/node_modules/webpack/lib/Compiler.js:681:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/circleci/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
    at AsyncSeriesHook.lazyCompileHook (/home/circleci/project/node_modules/tapable/lib/Hook.js:154:20)
    at /home/circleci/project/node_modules/webpack/lib/Compiler.js:678:31
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/circleci/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
    at AsyncSeriesHook.lazyCompileHook (/home/circleci/project/node_modules/tapable/lib/Hook.js:154:20)
    at /home/circleci/project/node_modules/webpack/lib/Compilation.js:1423:35
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/circleci/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
    at AsyncSeriesHook.lazyCompileHook (/home/circleci/project/node_modules/tapable/lib/Hook.js:154:20)
    at /home/circleci/project/node_modules/webpack/lib/Compilation.js:1414:32
Read more here: https://bit.ly/CRA-build-minify

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Exited with code exit status 1

[hinok]

@amcdnl

It seems that v2.3.3 should fix that (https://github.com/webpack-contrib/terser-webpack-plugin/releases/tag/v2.3.3) but in my project it didn't work...

source: webpack-contrib/terser-webpack-plugin#202 (comment)

I had to set explicitly number of cpus for parallel option and now it works.

[hernanif1]

@hinok @amcdnl do you guys know if there is a workaround without ejecting cra?

[hinok]

Quick update, the workaround for now is setting explicitly parallel option.

https://github.com/webpack-contrib/terser-webpack-plugin#parallel

Explanation: webpack-contrib/terser-webpack-plugin#202 (comment)

---

@hernanif1 Maybe you could try and configure terser in a such way: https://auth0.com/blog/how-to-configure-create-react-app/ (from https://create-react-app.dev/docs/alternatives-to-ejecting)

[prithvin]

@hinok craco https://www.npmjs.com/package/@craco/craco is an easier workaround to ejecting, we are currently using it for this issue

[hernanif1]

@prithvin excelent suggestion! Do you know if there is something that we could do in our project before implementing your suggestion?
Like reducing the bundle, code spliting?
The main questions is what I'm doing in my create-react-app that triggers this error?

[prithvin]

@hernanif1 my best guess is that suspense (ie code splitting) is the root cause of this. we started seeing failures on CI after code splitting, and on revert, with everything else staying the same, the issue did not show up. the nice part of the workaround is that we are able to continue to use code splitting

[kyeotic]

@prithvin Can you share the craco config you used to get this working? Ive tried

const TerserPlugin = require('terser-webpack-plugin')

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        parallel: 1 // and true, and 2
      })
    ]
  }
}

Which all still fail on circle ci

[prithvin]

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  webpack: {
    configure: (webpackConfig) => ({
      ...webpackConfig,
      optimization: {
        ...webpackConfig.optimization,
        minimizer: [
          new TerserPlugin({
            terserOptions: {
              parse: {
                ecma: 8,
              },
              compress: {
                ecma: 5,
                warnings: false,
                comparisons: false,
                inline: 2,
                drop_console: true,
              },
              mangle: {
                safari10: true,
              },
              output: {
                ecma: 5,
                comments: false,
                ascii_only: true,
              },
            },
            parallel: 2,
            cache: true,
            sourceMap: false,
            extractComments: false,
          }),
        ],
      },
    }),
  },
};

@kyeotic this was a hacky approach that worked for us

[kyeotic]

@prithvin Wow that was fast, and it worked! You're a life saver

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[dhruska]

I don't think that this issue should be closed. We're still having to use craco to have insight into the Terser config and parallel setting

[dominique-mueller]

We encountered the same issue on our own GitLab instance, increasing CPU and memory limits of the CI containers solved it. This solution only works if you host the CI by yourself, though.

[blakecannell]

Stopping by to note that I experienced this issue when upgrading react from 16.12.0 to 16.13.0 (an upgrade which included version updates of terser & terser-webpack-plugin in my yarn.lock file).

The craco solution is the way to go for this issue at the moment. Thanks to everyone that contributed above, this was doing my head in.

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[dhruska]

I think that this issue still exists.

[sadsa]

Yeah, this is still and issue for me as it's hapenning also with Bitbucket Pipelines and CRA.

[fauna-rodrigo]

Having the same issue on circle ci

[hshar7]

Issue opened since January! This needs to be fixed

[SwapnaleePatil]

Yes, facing the same issue and if now I try to downgrade the version of react-script it gives me below error
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined

Yeah, this is still and issue for me as it's hapenning also with Bitbucket Pipelines and CRA.

[miguelmota]

I was able to get around the Error: Call retries were exceeded error by increasing the instance type for the job in the circleci yaml config by adding resource_class: large. I think the error occurs when the build requires more memory than what the circleci instance allows.

.circleci/config.yml

  build:
    resource_class: large # <--- ADD THIS
    working_directory: ~/project

The craco workaround posted in the above comments did not work for me.

[jazeee]

Just a note - the Craco solution works well for this issue, but be aware that the config above turns off sourceMap - which you may want to enable for your production build.

[debu99]

if anyone find this issue by google, please check the memory usage during npm run build

[LuisCarrilloR]

Is there any update on this? I have tried most of the solutions but nothing is working...

[RT-iNvia]

This also seemed to be a problem in the project I work with.
We use gitlab-ci with docker/k8s on AWS. One of our internal npm-packages updated its deps to this, among others

    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-scripts": "^3.4.4",
    "react-styleguidist": "^11.1.0"

In the application using this package, which is based on react-app-rewired, the pipeline appeared to suddenly have become slower in the build-step and then also failed with the errors:

$ react-app-rewired build
Creating an optimized production  #build...
Failed to compile.
Failed to minify the bundle. Error: static/js/2.4db21d21.chunk.js from Terser
Error: Call retries were exceeded
    at compiler.run (/app/node_modules/react-scripts/scripts/build.js:196:23)

Using the proposed workaround from @jurosh in the config-overrides.js file in the projects root seems to have solved that problem momentarily.

[LuisCarrilloR]

There is a new CRA version 4 that solved my issue.

I updated the following values on the tsconfig.json compiler options and it worked.
"noFallthroughCasesInSwitch": true,
"jsx": "react",

[floyd-may]

The following solution posted by @miguelmota solved it for me.

.circleci/config.yml

  build:
    resource_class: large # <--- ADD THIS
    working_directory: ~/project

It appears that the error message that points at Terser is a red herring - take a look here:

webpack-contrib/terser-webpack-plugin#202 (comment) (TL; DR: terser isn't to blame, a worker proc is running out of memory)

Giving my build more memory solved the problem for me.

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[kyeotic]

@stalebot take a holiday mate

[ebwittenberg]

For those arriving late here:

I've build a solution based on #8320 (comment)

The first solution was removing OptimizeCSSAssetsPlugin from optimization.minimizer list.

Also, my solution keeps the same original settings that create-react-app provides (and is more future proof).

After installing craco add the following config

// craco.config.js
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  webpack: {
    configure: (webpackConfig) => ({
      ...webpackConfig,
      optimization: {
        ...webpackConfig.optimization,
        // Workaround for CircleCI bug caused by the number of CPUs shown
        // https://github.com/facebook/create-react-app/issues/8320
        minimizer: webpackConfig.optimization.minimizer.map(item => {
          if (item instanceof TerserPlugin) {
            item.options.parallel = 0;
          }

          return item;
        })
      },
    }),
  },
};

If your CircleCI build is too slow or you still getting out of memory errors you can also disable source maps (memory heavy) in .env file:

# .env
GENERATE_SOURCEMAP=false

@onilton this worked for me, but what is it doing when item.options.parallel is set to 0? It seems that other solutions involve increasing the number of parallel processes.

[onilton]

@ebwittenberg

According to docs, that disables parallel running (it is the same as False):

https://github.com/webpack-contrib/terser-webpack-plugin#parallel

By default the parallel is calculated based on number of available cpus, but since CircleCi doesn't provide a reliable value for this, this usually explodes memory usage (because the number of instances/parallel is too high).

One workaround is to setting this value by hand (and not relying on CircleCi fake cpu count), but for this you need better machines (not the free ones).

The other option is disabling parallel. (In my case, I didn't need to have a more expensive machine). It may be a little bit slower but it was cheaper .

[graup]

Forcing terser-webpack-plugin to a more recent version seems to have solved this issue for me. Thanks @sammarks.

package.json
{
  "resolutions": {
    "terser-webpack-plugin": "4.2.3"
  }
}

If I'm not mistaken this is mainly due to this fix, so any version newer than 2.3.3 would do. (react-scripts@4.0.3 uses webpack@4.44.2 which has a dependency on terser-webpack-plugin@1.4.3.)

So to solve this issue, all that has to be changed is to update dependencies. I guess it's tracked in #9994.

[iansu]

We've upgraded Terser to 4.2.3 in v4. Please try that version and see if it resolves the issue. If not please open a new issue.

[FezVrasta]

FYI the issue can still be reproduced on very large files.

[thava]

package.json
{
"resolutions": {
"terser-webpack-plugin": "4.2.3"
}
}

This finally worked for me! This is simpler than using craco or the equivalent. Thank you for saving me from going insane ... Thanks to @graup and @sammarks