"Failed to minify the bundle" error on build (related to Terser)

[tobbbe]

Is this a bug report?

yes

Did you try recovering your dependencies?

yes, npm version 6.4.1

Environment

Mac and windows

System:
    OS: Windows 10
    CPU: x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 42.17134.1.0
    Internet Explorer: 11.0.17134.1
  npmPackages:
    react: ^16.7.0 => 16.7.0
    react-dom: ^16.7.0 => 16.7.0
    react-scripts: 2.1.3 => 2.1.3
  npmGlobalPackages:
    create-react-app: Not Found

and

System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 10.12.0 - ~/.nvm/versions/node/v10.12.0/bin/node
    npm: 6.4.1 - ~/.nvm/versions/node/v10.12.0/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Safari: 12.0.3
  npmPackages:
    react: ^16.7.0 => 16.7.0
    react-dom: ^16.7.0 => 16.7.0
    react-scripts: 2.1.3 => 2.1.3
  npmGlobalPackages:
    create-react-app: Not Found

Steps to Reproduce

1. npx create-react-app hey
2. cd hey
3. npm run build

Expected Behavior

Production build should be built

Actual Behavior

[fuzzykiller]

Also reproducible with yarn by deleting yarn.lock. Here’s the diff between the yarn.lock versions.

[idrm]

yarn build works for me right after npx create-react-app, but fails if I delete yarn.lock and node_modules, and reinstall the modules via yarn install.

[romannep]

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

[Infi-Knight]

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!

[idrm]

@romannep -- Thanks! That did the trick for me as well.

[fuzzykiller]

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]

fuzzykiller's fix also works. Looks like CRA needs to solve it's issues with terser

[idrm]

⚠️ npm does not support the resolutions block in package.json.

[nicewaytodoit]

terser fix works with npm but does not with yarn

[Infi-Knight]

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?

[dankreiger]

The app builds successfully with yarn or npm when created with Node 11:

More specifically:

"node": "11.5.0",
"npm": "6.7.0"

---

However, I get the same error i.e. TypeError: Cannot read property 'minify' of undefined if I build a new app on Node 10:

More specifically:

"node": "10.10.0",
"npm": "6.4.1"

or:

"node": "10.15.1",
"npm": "6.4.1"

The Node LTS is currently 10.15.1, so I don't think I should be building a production ready app with Node 11, so I am wondering how I can run a successful build with Node 10.x.x

---

Note:

As mentioned before by @romannep, installing terser@3.14.1 allows me to build successfully on Node 10.15.1 when using npm:

$ npm install terser@3.14.1 --save-dev
$ npm run build

[Infi-Knight]

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

@Infi-Knight - I'm having the same issue inside a docker container too. And none of these solutions seem to be working for me.