Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
tobbbe opened this issue Feb 2, 2019 · 28 comments · Fixed by AudiusProject/audius-client#153
Closed

Comments

@tobbbe
Copy link

tobbbe commented Feb 2, 2019

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

@fuzzykiller
Copy link

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

@idrm
Copy link

idrm commented Feb 2, 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.

@romannep
Copy link

romannep commented Feb 2, 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 terser@3.14.1 --save-dev

@Infi-Knight
Copy link

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
Copy link

idrm commented Feb 2, 2019

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

@fuzzykiller
Copy link

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
Copy link

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

@idrm
Copy link

idrm commented Feb 2, 2019

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

@nicewaytodoit
Copy link

terser fix works with npm but does not with yarn

@Infi-Knight
Copy link

Infi-Knight commented Feb 2, 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

> 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
Copy link

dankreiger commented Feb 2, 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 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

noircir added a commit to noircir/js-emaily-server that referenced this issue Feb 3, 2019
@Infi-Knight
Copy link

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

@ghost
Copy link

ghost commented Feb 3, 2019

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

@mrmckeb mrmckeb self-assigned this Feb 3, 2019
@mrmckeb
Copy link
Contributor

mrmckeb commented Feb 3, 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
Copy link
Contributor

mrmckeb commented Feb 3, 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?

@RaMdsC
Copy link

RaMdsC commented Feb 3, 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 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.

@Infi-Knight
Copy link

@RaMdsC thanks, your fix works

@erwanriou
Copy link

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?

@noircir
Copy link

noircir commented Feb 3, 2019

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

@mrmckeb
Copy link
Contributor

mrmckeb commented Feb 3, 2019

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.

@erwanriou
Copy link

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

nuyawktuah pushed a commit to nycmeshnet/network-map that referenced this issue Feb 3, 2019
@BrendanFDMoore
Copy link

BrendanFDMoore commented Feb 4, 2019

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

@mrmckeb mrmckeb pinned this issue Feb 4, 2019
@mrmckeb mrmckeb changed the title npm run build not working on newly created app "Failed to minify the bundle" error on build (related to Terser) Feb 4, 2019
carlosms added a commit to carlosms/vscode-webview-react that referenced this issue Feb 4, 2019
Workaround for facebook/create-react-app#6334

Signed-off-by: Carlos Martín <carlos.martin.sanchez@gmail.com>
carlosms added a commit to carlosms/vscode-webview-react that referenced this issue Feb 4, 2019
carlosms added a commit to carlosms/vscode-webview-react that referenced this issue Feb 4, 2019
@mrmckeb
Copy link
Contributor

mrmckeb commented Feb 4, 2019

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 mrmckeb closed this as completed Feb 4, 2019
@lindhe
Copy link

lindhe commented Feb 5, 2019

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.

@RaMdsC
Copy link

RaMdsC commented Feb 5, 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. terser@3.14.1 in dependencies
  3. terser@3.14.1 in devDependencies

In (1), terser@3.16.1 gets installed as an independent package.
In (2), terser@3.14.1 gets installed as an independent package.
In (3) however, even if terser@3.14.1 installs as an independent package, terser-webpack-plugin also pulls terser@3.16.1 as a dependency.

You can further observe this with the existence of node_modules/terser-webpack-plugin/node_modules/terser and terser@3.16.1 as a dependency for terser-webpack-plugin in package-lock.json.

My guess is dependency gets prioritized over independent package.

@lindhe
Copy link

lindhe commented Feb 6, 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 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?

@fuzzykiller
Copy link

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

@ianschmitz ianschmitz unpinned this issue Feb 7, 2019
@lindhe
Copy link

lindhe commented Feb 7, 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.

sashadarling pushed a commit to sashadarling/tic-tac-toe that referenced this issue Feb 9, 2019
@lock lock bot locked and limited conversation to collaborators Feb 12, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.