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

Created on 2 Feb 2019  路  28Comments  路  Source: facebook/create-react-app

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

image

bug needs investigation underlying tools
Source
picture tobbbe
👍17

Most helpful comment

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 [email protected] --save-dev

picture romannep on 2 Feb 2019
👍18

All 28 comments

Also reproducible with yarn by deleting yarn.lock. Here鈥檚 the diff between the yarn.lock versions.

fuzzykiller picture fuzzykiller on 2 Feb 2019

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.

idrm picture idrm on 2 Feb 2019

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 [email protected] --save-dev

romannep picture romannep on 2 Feb 2019
👍18

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 [email protected] --save-dev

Works for now!

Infi-Knight picture Infi-Knight on 2 Feb 2019
👍3 👎1

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

idrm picture idrm on 2 Feb 2019

That鈥檚 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鈥檚 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.
fuzzykiller picture fuzzykiller on 2 Feb 2019
👍12

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

Infi-Knight picture Infi-Knight on 2 Feb 2019

:warning: npm does not support the resolutions block in package.json.

idrm picture idrm on 2 Feb 2019

terser fix works with npm but does not with yarn

nicewaytodoit picture nicewaytodoit on 2 Feb 2019

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

> [email protected] 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! [email protected] build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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?

Infi-Knight picture Infi-Knight on 2 Feb 2019

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 [email protected] allows me to build successfully on Node 10.15.1 when using npm:

$ npm install [email protected] --save-dev
$ npm run build
dankreiger picture dankreiger on 3 Feb 2019

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

> [email protected] 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! [email protected] build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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 [email protected] --save-dev inside docker container

Infi-Knight picture Infi-Knight on 3 Feb 2019
👍1

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

ghost picture ghost on 3 Feb 2019

Hi all, thanks for raising this. I'd recommend using yarn resolutions if you can, until we discuss how to solve this. I'm raising with the team now.

mrmckeb picture mrmckeb on 3 Feb 2019

@vx-lp - are you using Yarn in the docker container? And you've updated your yarn.lock file after adding the resolutions field and running yarn?

mrmckeb picture mrmckeb on 3 Feb 2019

@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 [email protected] --save-dev
npm run build

As a step in Dockerfile:

RUN npm install &&\
    rm -r node_modules/terser &&\
    npm install [email protected] --save-dev &&\
    npm run build

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

RaMdsC picture RaMdsC on 3 Feb 2019
👍3 ❤2 🎉1

@RaMdsC thanks, your fix works

Infi-Knight picture Infi-Knight on 3 Feb 2019

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?

erwanriou picture erwanriou on 3 Feb 2019
👍1

@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 [email protected]
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"

noircir picture noircir on 3 Feb 2019
👍4 🎉1

I have pinged the team at Terser, as the fastest fix is them releasing a patch. This seems to be affecting other projects too, judging by the issues against Terser.

I've also pinged the more senior members of our team, as I don't have the access levels to do anything from our end.

mrmckeb picture mrmckeb on 3 Feb 2019

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 [email protected] --prefix client && npm run build --prefix client"

` Running heroku-postbuild

[email protected] heroku-postbuild /tmp/build_e3190506ce04ec098fd91e520951f690
NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm install [email protected] --prefix client && npm run build --prefix client

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

  • [email protected]
    updated 1 package and audited 36959 packages in 18.136s
    found 0 vulnerabilities

    [email protected] build /tmp/build_e3190506ce04ec098fd91e520951f690/client
    react-scripts build

    Creating an optimized production build...
    Compiled with warnings.`

erwanriou picture erwanriou on 3 Feb 2019
👍1

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 :/

BrendanFDMoore picture BrendanFDMoore on 4 Feb 2019
👍1

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 picture mrmckeb on 4 Feb 2019
🎉5

Hm, I'm missing something here. I had a package-lock.json where the terser version was 3.14.1. I thought that package-lock existed exactly to ensure reproducible builds... Any idea why terser 3.16 was installed for me when running npm install?

Now it seems that it have rolled back to 3.14.1, but I'm pretty sure I tested it this Monday and couldn't build because of it.

lindhe picture lindhe on 5 Feb 2019

@lindhe This looks to me like _terser-webpack-plugin_ pulls _terser_ as its own dependency if you specify _terser_ in _devDependencies_, as suggested in answers above.
Quickly tested three scenarios:

  1. No _terser_ in _package.json_
  2. [email protected] in _dependencies_
  3. [email protected] in _devDependencies_

In (1), [email protected] gets installed as an independent package.
In (2), [email protected] gets installed as an independent package.
In (3) however, even if [email protected] installs as an independent package, _terser-webpack-plugin_ also pulls [email protected] as a dependency.

You can further observe this with the existence of node_modules/terser-webpack-plugin/node_modules/terser and [email protected] as a dependency for _terser-webpack-plugin_ in package-lock.json.

My guess is dependency gets prioritized over independent package.

RaMdsC picture RaMdsC on 5 Feb 2019

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 [email protected] 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?

lindhe picture lindhe on 6 Feb 2019
😕1

@lindhe package-lock.json is only truly effective with npm ci. Do not use npm install unless you want to update stuff.

fuzzykiller picture fuzzykiller on 6 Feb 2019

What a pity. I'm at npm version 3.10.10 and that seems to not have the ci command. But thank you very much for the suggestion.

lindhe picture lindhe on 7 Feb 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

xgqfrms-GitHub picture xgqfrms-GitHub  路  3Comments
AlexeyRyashencev picture AlexeyRyashencev  路  3Comments
onelson picture onelson  路  3Comments
barcher picture barcher  路  3Comments
stopachka picture stopachka  路  3Comments