create-react-app: "Failed to minify the bundle" error on build (related to Terser)

terser is the reason. Namely it 3.16.0 release. Same bug was before - #5250 Temporary solution - fix previous terser verision (for example in dev dependencies)

npm install terser@3.14.1 --save-dev

That’s not helping with yarn, unfortunately. If you do this, terser will simply be installed twice:

$ find -type d -name terser
./node_modules/terser
./node_modules/terser-webpack-plugin/node_modules/terser

The newer version will be used, of course.

Instead, you have to add a resolutions block to your package.json:

"resolutions": {
  "terser": "3.14.1"
}

Also, here’s the error message as a searchable text:

Creating an optimized production build...
Failed to compile.

Failed to minify the bundle. Error: static/js/main.498d6779.chunk.js from Terser
TypeError: Cannot read property 'minify' of undefined
    at compiler.run (C:\Users\fuzzy\Documents\Repos\my-app4\node_modules\react-scripts\scripts\build.js:169:23)
    at finalCallback (C:\Users\fuzzy\Documents\Repos\my-app4\node_modules\webpack\lib\Compiler.js:210:39)
    at hooks.done.callAsync.err (C:\Users\fuzzy\Documents\Repos\my-app4\node_modules\webpack\lib\Compiler.js:226:13)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\fuzzy\Documents\Repos\my-app4\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\fuzzy\Documents\Repos\my-app4\node_modules\tapable\lib\Hook.js:154:20)
    at onCompiled (C:\Users\fuzzy\Documents\Repos\my-app4\node_modules\webpack\lib\Compiler.js:224:21)
    at hooks.afterCompile.callAsync.err (C:\Users\fuzzy\Documents\Repos\my-app4\node_modules\webpack\lib\Compiler.js:553:14)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\fuzzy\Documents\Repos\my-app4\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\fuzzy\Documents\Repos\my-app4\node_modules\tapable\lib\Hook.js:154:20)
    at compilation.seal.err (C:\Users\fuzzy\Documents\Repos\my-app4\node_modules\webpack\lib\Compiler.js:550:30)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\fuzzy\Documents\Repos\my-app4\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\fuzzy\Documents\Repos\my-app4\node_modules\tapable\lib\Hook.js:154:20)
    at hooks.optimizeAssets.callAsync.err (C:\Users\fuzzy\Documents\Repos\my-app4\node_modules\webpack\lib\Compilation.js:1295:35)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\fuzzy\Documents\Repos\my-app4\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\fuzzy\Documents\Repos\my-app4\node_modules\tapable\lib\Hook.js:154:20)
    at hooks.optimizeChunkAssets.callAsync.err (C:\Users\fuzzy\Documents\Repos\my-app4\node_modules\webpack\lib\Compilation.js:1286:32)
Read more here: http://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.

@Infi-Knight @vx-lp This worked for me when building React app inside a Docker image:

npm install
rm -r node_modules/terser
npm install terser@3.14.1 --save-dev
npm run build

As a step in Dockerfile:

RUN npm install &&\
    rm -r node_modules/terser &&\
    npm install terser@3.14.1 --save-dev &&\
    npm run build

No need to include terser in package.json dependencies before these steps.

Hi all, this should be resolved now by this release: https://www.npmjs.com/package/terser/v/3.16.1

Please report back if that doesn’t help.

@mrmckeb I’ve used Yarn in my project, and had a failing build on Heroku with this Terser complaint. After many hours, I figured out that:

1. the command should be yarn add terser@3.14.1
2. the yarn.lock file should NOT be removed
3. Heroku’s postbuild script does NOT have to be changed to Yarn (I’m deploying Node.js server and CRA client, together, so doing a client post-build as an option): "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"

terser is the reason. Namely it 3.16.0 release. Same bug was before - #5250 Temporary solution - fix previous terser verision (for example in dev dependencies)

npm install terser@3.14.1 --save-dev

Works for now!

Thank you @RaMdsC, your response helped me gain a bit better understanding. But I’m still a bit in the unclear as to why package-lock.json was not enough.

Sure, I can explicitly add terser@3.14.1 as a dependency. But I have about two thousand packages if I consider my full dependency tree, so adding each of them as a dependency manually can obviously not be the right way to go. This was where I thought package-lock.json came in; to automatically snapshot the version of each sub-dependency to ensure reproducibility. But that is quite clearly not what it does.

I’ve heard about shrinkwrap. Is this where that comes in? Not that I understand what use package-lock.json is, but maybe shrinkwrap actually can guarantee reproducible builds?

To fix this for my yarn-based build I needed to:

1. Add the resolution block per @fuzzykiller 's comment
2. Explicitly add terser-webpack-plugin as a dev dep: yarn add -D terser-webpack-plugin

I am more than a little hesitant to add tracking this to my plate to unwind later, but this was a blocker for pushing my latest patch 😕

how to fix in case of heroku postbuild with a subreact architecture and exclusively npm

ok i fix how to do it. We have to change the script just for this case:

"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm install terser@3.14.1 --prefix client && npm run build --prefix client"

` Running heroku-postbuild

archsplace@1.0.0 heroku-postbuild /tmp/build_e3190506ce04ec098fd91e520951f690 NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm install terser@3.14.1 --prefix client && npm run build --prefix client

added 1881 packages from 783 contributors and audited 36953 packages in 71.252s found 0 vulnerabilities

• terser@3.14.1 updated 1 package and audited 36959 packages in 18.136s found 0 vulnerabilities

client@0.1.0 build /tmp/build_e3190506ce04ec098fd91e520951f690/client react-scripts build

Creating an optimized production build… Compiled with warnings.`

Same bug on ubuntu. Installed lastest version of node an npm, but it keep failing when try to build on heroku server. Working locally.

Can we expect the issue be fix in a further patch since the current solution is not really idealistic?

Now I am facing trouble to get the terser fix work inside docker. After bootstraping the simple react app if I delete node_modules folder in the working directory then build fails inside the docker container. But if I keep the contents of node_modules intact then docker uses build context and is successfully able to build the app. Here is my dockerfile:

FROM node:alpine as builder
WORKDIR /app
COPY package.json . 
RUN npm install
COPY . .
RUN npm run build

FROM nginx
COPY --from=builder /app/build /usr/share/nginx/html

And I get the same terser error:

Sending build context to Docker daemon  1.605MB
Step 1/8 : FROM node:alpine as builder
 ---> 5b852091254e
Step 2/8 : WORKDIR /app
 ---> Using cache
 ---> eb60e6e734a3
Step 3/8 : COPY package.json .
 ---> Using cache
 ---> 3a582ce7ecac
Step 4/8 : RUN npm install
 ---> Using cache
 ---> ca2f0d2e8cc5
Step 5/8 : COPY . .
 ---> 7000f4397dee
Step 6/8 : RUN npm run build
 ---> Running in 541e389f0440

> frontend@0.1.0 build /app
> react-scripts build

Creating an optimized production build...
Failed to compile.

Failed to minify the bundle. Error: static/js/main.a4e75c44.chunk.js from Terser
TypeError: Cannot read property 'minify' of undefined
    at compiler.run (/app/node_modules/react-scripts/scripts/build.js:169:23)
    at finalCallback (/app/node_modules/webpack/lib/Compiler.js:210:39)
    at hooks.done.callAsync.err (/app/node_modules/webpack/lib/Compiler.js:226:13)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/app/node_modules/tapable/lib/Hook.js:154:20)
    at onCompiled (/app/node_modules/webpack/lib/Compiler.js:224:21)
    at hooks.afterCompile.callAsync.err (/app/node_modules/webpack/lib/Compiler.js:553:14)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/app/node_modules/tapable/lib/Hook.js:154:20)
    at compilation.seal.err (/app/node_modules/webpack/lib/Compiler.js:550:30)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/app/node_modules/tapable/lib/Hook.js:154:20)
    at hooks.optimizeAssets.callAsync.err (/app/node_modules/webpack/lib/Compilation.js:1295:35)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/app/node_modules/tapable/lib/Hook.js:154:20)
    at hooks.optimizeChunkAssets.callAsync.err (/app/node_modules/webpack/lib/Compilation.js:1286:32)
Read more here: http://bit.ly/CRA-build-minify

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! frontend@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the frontend@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2019-02-02T20_50_12_246Z-debug.log
The command '/bin/sh -c npm run build' returned a non-zero code: 1

How do I resolve this?

Build process failing even after npm install terser@3.14.1 --save-dev inside docker container