Skip to content

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

Closed
AudiusProject/audius-client
#153
Closed
"Failed to minify the bundle" error on build (related to Terser)#6334
AudiusProject/audius-client
#153
Assignees
mrmckeb
Labels
issue: bugissue: needs investigationtag: underlying tools

Description

@tobbbe
tobbbe
opened on 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

Activity

  1. btzdnl commented on Feb 2, 2019

    @btzdnl
    btzdnl
    on Feb 2, 2019

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

  2. idrm commented on Feb 2, 2019

    @idrm
    idrm
    on 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.

  3. romannep commented on Feb 2, 2019

    @romannep
    romannep
    on 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

  4. Infi-Knight commented on Feb 2, 2019

    @Infi-Knight
    Infi-Knight
    on 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

    Works for now!

  5. idrm commented on Feb 2, 2019

    @idrm
    idrm
    on Feb 2, 2019

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

  6. btzdnl commented on Feb 2, 2019

    @btzdnl
    btzdnl
    on Feb 2, 2019

    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.

  7. Infi-Knight commented on Feb 2, 2019

    @Infi-Knight
    Infi-Knight
    on Feb 2, 2019

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

  8. idrm commented on Feb 2, 2019

    @idrm
    idrm
    on Feb 2, 2019

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

  9. nicewaytodoit commented on Feb 2, 2019

    @nicewaytodoit
    nicewaytodoit
    on Feb 2, 2019

    terser fix works with npm but does not with yarn

  10. Infi-Knight commented on Feb 2, 2019

    @Infi-Knight
    Infi-Knight
    on 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?

  11. dankreiger commented on Feb 2, 2019

    @dankreiger
    dankreiger
    on 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
  12. noircir
    added a commit that references this issue on Feb 3, 2019

    downgrade terser as per react/create-react-app#6334

    21c533f

  13. Infi-Knight commented on Feb 3, 2019

    @Infi-Knight
    Infi-Knight
    on Feb 3, 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?

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

  15. mrmckeb
    self-assigned this
    on Feb 3, 2019

  16. 13 remaining items

  17. mrmckeb
    pinned this issue on Feb 4, 2019
  18. mrmckeb
    changed the title [-]npm run build not working on newly created app[/-] [+]"Failed to minify the bundle" error on build (related to Terser)[/+] on Feb 4, 2019
  19. carlosms
    added 3 commits that reference this issue on Feb 4, 2019

    Pin terser version to 3.14.1

    237c153

    Pin terser version to 3.14.1

    6668229

    Pin terser version to 3.14.1

    eb34f0b

  20. mrmckeb commented on Feb 4, 2019

    @mrmckeb
    mrmckeb
    on Feb 4, 2019
    Contributor

    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.

  21. mrmckeb
    closed this as completedon Feb 4, 2019

  22. lindhe commented on Feb 5, 2019

    @lindhe
    lindhe
    on 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.

  23. RaMdsC commented on Feb 5, 2019

    @RaMdsC
    RaMdsC
    on 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.

  24. lindhe commented on Feb 6, 2019

    @lindhe
    lindhe
    on 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?

  25. btzdnl commented on Feb 6, 2019

    @btzdnl
    btzdnl
    on Feb 6, 2019

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

  26. ianschmitz
    unpinned this issue on Feb 7, 2019

  27. lindhe commented on Feb 7, 2019

    @lindhe
    lindhe
    on 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.

  28. sashadarling
    added a commit that references this issue on Feb 9, 2019

    adding terser to workaround an issue with deploy react/create-react-a…

    333ff3d
  29. lock
    locked and limited conversation to collaborators on Feb 12, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

issue: bugissue: needs investigationtag: underlying tools

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions